다기능 탭

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