多功能標籤

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(); 
});