Проблема создания меню навигации - PullRequest
Новая
       8

Проблема создания меню навигации

1 голос
/ 21 февраля 2012

Я уверен, что это легко, но я просто не могу понять это. У меня есть этот HTML (http://jsfiddle.net/qzr3X/)

<div id="wrapper">
<ul id="tabs">
    <li><a href="#">Dashboard</a></li>
    <li><a href="#">Second Tab</a></li>
    <li><a href="#">Third Tab</a></li>
</ul>
<div id="content"></div>

1005 *

и CSS: 

 * {
    margin: 0;
    padding: 0;
}
ul#tabs {
    list-style-type: none;
    overflow: hidden;
}

ul#tabs li  {
    float: left;
}
ul#tabs li a {
    z-index: 99;
    display: block;
    margin: 0 0.416em -6px 0;
    padding: 1.66em 0.833em;
    border: 1px solid lightgray;
    background: lightgray;
    border-bottom: none;
}

div#content {
    background: lightgray;
    height: 100px;
    border: 1px solid black;
}​

и я хочу, чтобы оно выглядело как меню навигации. Однако, как обычно, я хочу, чтобы граница области содержимого охватывала все элементы, кроме активной вкладки (в данном случае это «Панель инструментов»):

enter image description here

Я уже пытался увеличить z-индекс, но он не работает. Чего мне не хватает?

Привет

1 Ответ

1 голос
/ 21 февраля 2012

Я не уверен на 100%, что за тобой.

Из того, что я понял, вы хотите, чтобы граница появлялась вокруг неактивных вкладок и не имела границы, отделяющей активную вкладку от содержимого.Это правильно?

Это в основном не обманывает активную вкладку, чтобы покрыть границу контента цветом границы, который соответствует контенту.

Но вам нужно отметить класс, который добавляется на вкладку «Панель инструментов».Это тот активный класс, который закрывает границу в нижней части вкладки, к которой он применяется.

Я добавил несколько jquery для динамического изменения границ при нажатии вкладок.

...