多功能标签

Question

HTML：

<ul class="tabs"> 
<li><a href="#tab-one" class="current">Residential</a></li> 
<li><a href="#tab-two">Commercial</a></li> 
<li><a href="#tab-three">Agricultural</a></li> 
</ul> 

<div id="tab-one" class="tab_container"> 
    <div class="quick-search"> 
    <h2>Tab 1 - Quick Search:</h2> 
    <form action="#" method="post"> 
     <label for="quick-search-1" class="screen-reader-text">Quick Search:</label> 
     <input type="text" name="quick-search-1" id="quick-search-1" value="" placeholder="e.g. search"/> 
      <button class="quick-search-submit" class="button" type="submit">Submit</button> 
     </form> 
    </div> 
    <div class="adv-search"> 
    <h2>Tab 1 - Advanced Search:</h2> 
    <form action="#" method="post"> 
     <label for="adv-search-1" class="screen-reader-text">Search:</label> 
     <input type="text" name="adv-search-1" id="adv-search-1" value="" placeholder="e.g. search"/> 
      <button class="adv-search-submit" class="button" type="submit">Submit</button> 
     </form> 
    </div> 
</div> 

<div id="tab-two" class="tab_container"> 
    <div class="quick-search"> 
    <h2>Tab 2 - Quick Search:</h2> 
    <form action="#" method="post"> 
     <label for="quick-search-2" class="screen-reader-text">Quick Search:</label> 
     <input type="text" name="quick-search-2" id="quick-search-2" value="" placeholder="e.g. search"/> 
      <button class="quick-search-submit" class="button" type="submit">Submit</button> 
     </form> 
    </div> 
    <div class="adv-search"> 
    <h2>Tab 2 - Advanced Search:</h2> 
    <form action="#" method="post"> 
     <label for="adv-search-2" class="screen-reader-text">Search:</label> 
     <input type="text" name="adv-search-2" id="adv-search-2" value="" placeholder="e.g. search"/> 
      <button class="adv-search-submit" class="button" type="submit">Submit</button> 
     </form> 
    </div> 
</div> 

<div id="tab-three" class="tab_container"> 
    <div class="quick-search"> 
    <h2>Tab 3 - Quick Search:</h2> 
    <form action="#" method="post"> 
     <label for="quick-search-3" class="screen-reader-text">Quick Search:</label> 
     <input type="text" name="quick-search-3" id="quick-search-3" value="" placeholder="e.g. search"/> 
      <button class="quick-search-submit" class="button" type="submit">Submit</button> 
     </form> 
    </div> 
    <div class="adv-search"> 
    <h2>Tab 3 - Advanced Search:</h2> 
    <form action="#" method="post"> 
     <label for="adv-search-3" class="screen-reader-text">Search:</label> 
     <input type="text" name="adv-search-3" id="adv-search-3" value="" placeholder="e.g. search"/> 
      <button class="adv-search-submit" class="button" type="submit">Submit</button> 
     </form> 
    </div> 
</div> 

<div class="advanced-search"> 
    <span>Advanced Search</span> 
</div> 

的jQuery：

$('.tab_container:not(:first)').hide(); 

$('ul.tabs li a').click(function(){ 
    var t = $(this).attr('href'); 
    $('.tab_container').hide(); 
    $(t).fadeIn('slow'); 
    return false; 
}); 

这一切确实是目前标签的内容相关的选项卡点击。

我需要这个来首先每次点击每个标签时只显示'快速搜索'。 然后，如果用户单击高级搜索范围，则快速搜索div将与高级搜索div切换。

这可能吗？

查看我目前jsFiddle

Answer 1

您只需拨动每一个当前可见的DIV中

$('ul.tabs li a').click(function() { 
    var t = $(this).attr('href'); 
    $('.tab_container').hide(); 
    $(t).fadeIn('slow'); 
    updateWord(); 
    return false; 
}); 
// on advanced-search div click 
$('.advanced-search').click(function() { 
    // toggle both divs inside the visible div 
    $('div.tab_container:visible').find('.quick-search,.adv-search').toggle(); 
    updateWord(); 
}); 
// function to update wording on div 
function updateWord() { 
    var c = $('div.tab_container:visible').find('div:visible').attr('class'); 
    $('.advanced-search').text(function (i, v) { 
    return c.split('-')[0] == 'quick' ? v.replace('Quick', 'Advanced') : v.replace('Advanced', 'Quick') 
    }); 
} 

FIDDLE

Answer 2

只需用小提琴有点玩，我做了这些改变

$('.tab_container:not(:first)').hide(); 
$('.adv-search').hide(); 
$('ul.tabs li a').click(function(){ 
    var t = $(this).attr('href'); 
    $('.tab_container').hide(); 
    $(t).fadeIn('slow'); 
    return false; 
}); 

$('.advanced-search').click(function(){ 
    var curTab = $('.tab_container:visible'); 
    curTab.find('.quick-search').hide() 
    curTab.find('.adv-search').show(); 
});