使用jquery的多功能选项卡

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