All geek questions in one place

Best way to code HTML / CSS / JS tab navigation system (no image)

I am coding a tab system for my site, which should be completely CSS / HTML / JS (without using any images). The problem is that I continue to crack the code until I finish messing it up. I do not know whether to use positioning or float tabs or what. Basically, one of the big problems is that after I remove the CSS bottom border of the selected tab, I need to move it 1px so that it blends seamlessly with the sorting headers - I don't know whether to use margin: -1px or position : relative / absolute, etc. I would like some tips on properly coding such a tab system so that it can be reused on a website!

alt text

+3
5

CSS, :

HTML:

<body>
    <div class="tabs">
        <ul>
            <li><a href="#item1">Item 1</a></li>
            <li class="active"><a href="#item2">Item 2</a></li>
            <li><a href="#item3">Item 3</a></li>
        </ul>
        <div class="tabInner">
            <div id="item1">
                bla1
            </div>
            <div id="item2">
                bla2
            </div>
            <div id="item3">
                bla3
            </div>
        </div>
    </div>
</body>

CSS

.tabs ul {
    list-style: none;
}

.tabs ul li {
    float: left;
    background: #eee;
    border: 1px #aaa solid;
    border-bottom: none;
    margin-right: 10px;
    padding: 5px;
}

.tabs ul li.active {
    margin-bottom: -1px;
    padding-bottom: 6px;
}

.tabInner {
    clear: both;
    border: 1px solid #aaa;
    height: 200px;
    overflow: hidden;
    background: #eee;
}

.tabInner div {
    height: 200px;
    padding: 10px;

}

JS ( ). JS "" arround, .

: http://jsfiddle.net/V8CK4/

+5

divs, .

<ul>
<li>Tab1
    <div> Content for Tab1</div>  
</li>
<li>Tab2
    <div> Content for Tab2</div>  
</li>
<li>Tab3
    <div> Content for Tab3</div>  
</li>
</ul>

CSS- ul li div . jQuery divs li.

EDIT: ... , li , . none.

+2

-, :

<div class="tabContainer">
    <ul class="tabList">
        <li><a href="#item1">Item 1</a></li>
        <li><a href="#item2">Item 2</a></li>
        <li><a href="#item3">Item 3</a></li>
    </ul>

    <em class="tabMessage">This is the message on the right.</em>

    <div class="tabInnerContainer">
        <div id="item1">
            bla
        </div>
        <div id="item2">
            bla
        </div>
        <div id="item3">
            bla
        </div>
    </div>
</div>

, , Javascipt, JS. CSS3-.

+1

, , , , .

, , , , , ( ), ( , ), . .

:

I.

     _________________ 
    |                 |
    |    tab          |
  __|_________________|________________________________
 |                                                     |
 |       menu bar                                      |
 |_____________________________________________________|

II.

     _________________ 
    |    tab          |
    |- - - - - - - - -|
 ___|    patch        |_______________________________
|    - - - - - - - - -                                |
|        menu bar                                     |
|_____________________________________________________|

z-indexes, . div, , position: absolute top.

:

http://jsfiddle.net/7GJaW/

+1

Like the mention of @Otis, embedding is a pretty good technique. I usually nest

  • Link 1
    • Link 1 Item 1
    • Link 1 Item 2

However, if you are not trying to make a drop down menu ...

0
source

Source: https://habr.com/ru/post/1754643/

More articles:


All Articles