Как скрыть слои с вкладками с вкладками с вкладками

Question

У меня есть сайт, в котором я использую jquery, чтобы иметь выпадающий контент на странице. Когда вы нажимаете на одну из вкладок вверху, окно падает с содержимым. Моя дилемма, однако, выясняет, как скрыть эти падения, пока посетитель не нажмет на одну из вкладок. В настоящее время вкладка, отмеченная tab1 или «Тест 1», отображается при загрузке страницы. Как я могу скрыть эти слои до тех пор, пока не будет нажата ссылка. Я новичок в понимании jquery, но обнаружил, что мне нравятся его функции и возможности без использования Flash.

Сценарий для выпадающие является:

<script type="text/javascript"> 
$(document).ready(function(){ 
$('ul.tabNav a').click(function() { 
    var curChildIndex = $(this).parent().prevAll().length + 1; 
    $(this).parent().parent().children('.current').removeClass('current'); 
    $(this).parent().addClass('current'); 

$(this).parent().parent().next('.tabContainer').children('.current').slideUp('fast',function() { 
     $(this).removeClass('current'); 
     $(this).parent().children('div:nth 
child('+curChildIndex+')').slideDown('normal',function() { 
      $(this).addClass('current'); 
     }); 
    }); 
    return false;        
}); 
}); 
</script> 

навигационных ссылок настраиваются как:

<div id="nav"> 
    <ul class="tabNav"> 
<li class="current"><a href="?tab=1">Test 1</a></li> 
<li><a href="?tab=2">Test 2</a></li> 
<li><a href="?tab=3">Test 3</a></li> 
<li><a href="?tab=4">Test 4</a></li> 
<li><a href="?tab=5">Test 5</a></li> 
    </ul> 
<div class="tabContainer"> 

    <div class="tab current"> 
    <h1>Test Heading</h1> 
    <p>Test body content </p> 
</div> 

    <div class="tab"> 
<h1>Test Heading</h1> 
    <p>Test body content </p> 
    </div> 

    <div class="tab"> 
    <h1>Test Heading</h1> 
    <p>Test body content </p> 
    </div> 

<div class="tab"> 
    <h1>Test Heading</h1> 
    <p>Test body content </p> 
    </div> 

<div class="tab"> 
    <h1>Test Heading</h1> 
    <p>Test body content </p> 
    </div> 
</div> 

Вот CSS для вкладок:

<style type="text/css"> 
ul.tabNav { 
list-style: none; 
width: 100%; 
float: left; 
} 
ul.tabNav li { 
float: left; 
margin: 0; 
} 
ul.tabNav li.current { 
} 
ul.tabNav a { 
color: #FFF; 
display: block; 
height: 66px; 
padding: 10px; 
text-decoration: none; 
width: 66px; 
margin-left: 4px; 
font-size: 16px; 
border: 1px solid #FF9933; 
text-align: center; 
font-weight: normal; 
text-transform: lowercase; 
font-family: "Century Gothic"; 
letter-spacing: 1px; 
line-height: 60px; 
} 
ul.tabNav li.current a { 
padding: 10px; 
} 
div.tabContainer { 
clear: both; 
float: right; 
width: 500px; 
z-index: 9999; 
} 
div.tabContainer div.tab { 
border: 1px solid #FF9933; 
color: #FFF; 
display: none; 
padding: 10px; 
background-image: url(images/slideshow_bg.png); 
background-repeat: repeat; 
margin-top: 14px; 
height: 435px; 
} 
div.tabContainer div.current { display: block; } 
div.tab p:last-child { margin-bottom: 0; } 
</style> 

Любое предложение ns или я чего-то не хватает, чтобы делать то, что мне нужно?

Спасибо!

Answer 1

Чтобы скрыть все дивы из class="tab" вы могли бы просто использовать CSS:

.tabContainer .tab { дисплей: нет; }

Я также предлагаю о внесении изменений ваш HTML наценку на:

<ul class="tabNav"> 
    <li class="current"><a href="#tab1">Test 1</a></li> 
    <li><a href="#tab2">Test 2</a></li> 
    <li><a href="#tab3">Test 3</a></li> 
    <li><a href="#tab4">Test 4</a></li> 
    <li><a href="#tab5">Test 5</a></li> 
</ul> 

Это использует #, который идентифицирует/элемент фрагмента в одной и той же странице, вместо ?. Хотя это связано только с тем, что мне проще использовать встроенные функции браузера # вместе с CSS, вместо того, чтобы использовать jQuery (или серверный скрипт) для доступа к парам ключ/значение, переданным методом http 'GET'.

Для использования выше текущего кода легко использовать JQuery для назначения id с до соответствующих элементов:

$('.tabContainer > div.tab').each(
function(i) { 
    this.id = 'tab' + (i + 1); 
}); 

JS Fiddle demo of the above ideas.

Answer 2

Я хотел бы сделать что-то вроде этого:

$('ul.tabNav a').click(function() { 
    /* retrieves the index of the LI in the UL 
    This index should be the same than the corresponding item in .tabContainer */ 
    var curChildIndex = $(this).parents("ul").eq(0).find("li").index($(this).parent()); 
    /* We remove the class from all elements in tabContainer and tabNav */ 
    $(".tabNav,.tabContainer").find("li").removeClass('current'); 
    /* We add the class to the LI in which we clicked the link */ 
    $(this).parent().addClass("current"); 
    /* Here, I assume that your content in .tabContainer is in a DIV 
    but you might want to change this */ 
    $(".tabContainer").find("div").eq(curChildIndex).addClass("current"); 
});