Проблема CSS, создание вкладок

Question

У меня проблема с CSS, которую я не могу понять. Я даже не уверен, что это возможно. То, что я хочу, это следующее:

У меня есть три кнопки / вкладки, подобные этой http://sv.tinypic.com/r/21cf85t/6, и когда вы нажимаете одну вкладку, для каждой вкладки должен отображаться другой элемент div http://sv.tinypic.com/r/21l5y85/6 или http://sv.tinypic.com/r/2dbrv5u/6.

Я знаю, как показать / скрыть div с помощью jQuery, но проблема в том, что div увеличатся в высоту http://sv.tinypic.com/r/k2xxfb/6, а затем они будут нажимать на другие вкладки и div. Есть ли способ создать то, что я пытаюсь сделать?

Я не гуру в CSS, поэтому, если у вас есть пример, который вы можете посмотреть или можете опубликовать здесь код, я был бы очень благодарен!

Это HTML-код, который я использую для своих вкладок:

<div class="MainContent">Content</div>
<div class="TabsHolder">
    <div id="Tab1">
        <div style="width:200px">
            Content Tab 1
        </div>
    </div>
    <a class="Button1" href="#Tab1"></a>
    <div class="clearer"></div>
    <div id="Tab2">
        <div style="width:200px">
            Content Tab 2
        </div>
    </div>
    <a class="Button2" href="#Tab2"></a>
</div>

CSS:

.MainContent {
    float: left;
}

.TabsHolder 
{
    float: left;
}

.Button1
{
    float: left;
    margin: 100px 0px 20px 0px;
    background: url(images/Button1.png) no-repeat 0 0;
    height: 79px;
    width: 27px;
}

#Tab1
{
    width: 200px;
    margin: 80px 0px 20px 0px; 
    border: solid 1px #ACCD45;
    position: relative;
    float: left;
    overflow: hidden;
    padding: 20px;
}

.Button2
{
    float: left;
    margin: 0px 0px 20px 0px;
    background: url(images/Button2.png) no-repeat 0 0;
    height: 97px;
    width: 27px;
}

#Tab2
{
    width: 200px;
    margin: 0px 0px 20px 0px;
    border: solid 1px #ACCD45;
    position: relative;
    float: left;
    overflow: hidden;
    padding: 20px;
}

div.clearer 
{
clear: both;
margin: 0px;
margin-bottom: 0px;
margin-top: 0px;
padding: 0px;
line-height: 0px; 
height: 0px;
width: 0px;
overflow: hidden;
}

Answer 1

Вот то, что я собрал, используя чистый CSS - протестировано в Firefox, IE8 и Chrome (не уверен насчет других). Попробуйте демо здесь .

Примечание. Я хотел бы прокомментировать одну вещь в исходном HTML - вы не можете добавить фоновое изображение к тегу <a>.

CSS

.MainContent {
 float: left;
 width: 400px;
 height: 400px;
 background: #444;
}

.buttons {
 float: left;
 margin: 10px 0 10px 0;
 width: 27px;
 clear: both;
}

.Button1 {
 background: #555 url(images/Button1.png) no-repeat 0 0;
 height: 79px;
}

.Button2 {
 background: #555 url(images/Button2.png) no-repeat 0 0;
 height: 97px;
}

.Button3 {
 background: #555 url(images/Button3.png) no-repeat 0 0;
 height: 127px;
}

.tabsHolder {
 float: left;
 position: relative;
}

.tabs {
 width: 200px;
 height: 200px;
 margin: 0 0 20px 0;
 border: solid 1px #ACCD45;
 background: #444;
 overflow: hidden;
 padding: 20px;
 display: none;
 position: absolute;
 left: 0;
}

#tab1 { top: 0; }
#tab2 { top: 98px; }
#tab3 { top: 215px; }

a:hover .tabs {display: block;}

HTML

<div class="MainContent">Content</div>
 <div class="tabsHolder">

  <a href="#tab1"><div class="buttons Button1">1</div>
   <div id="tab1" class="tabs">
    Content tab 1
   </div>
  </a>

  <a href="#tab2"><div class="buttons Button2">2</div>
   <div id="tab2" class="tabs">
    Content tab 2
   </div>
  </a>

  <a href="#tab3"><div class="buttons Button3">3</div>
   <div id="tab3" class="tabs">
    Content tab 3
   </div>
  </a>

 </div>
</div>

Answer 2

Без JavaScript вы не можете скрыть один из своих элементов div, у вас может быть только HTML-страница на вкладке (например, this или this ).

Если вы хотите что-то более динамичное, вы должны использовать JavaScript. Например, система вкладок является встроенным компонентом jQuery. ( Домашняя страница , демоверсия ).

Надеюсь, это поможет вам.

Answer 3

Вам нужно определить страницы (div, чтобы скрыть / показать) и вкладки в двух отдельных div.

Они захотят плавать рядом друг с другом, поэтому у вас будет что-то вроде

<div class="pages">
<div class="page" id="tab1">....</div>
<div class="page" id="tab2">....</div>
</div>
<div class="tabs">
<div class="tab"><a href="#tab1">Tab 1</a></div>
<div class="tab"><a href="#tab2">Tab 2</a></div>
</div>

Затем вы можете установить минимальную высоту на страницах (высоту для IE6, поместить в условную таблицу стилей), установить для страниц и вкладок одинаковые значения с плавающей точкой слева, обе с фиксированной шириной.

Наконец, когда вы присоединяете свое событие к $ ('# tab a'), убедитесь, что вы перебираете все страницы, скрывая не относящиеся к делу.