0

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

4

2 回答 2

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

小提琴

于 2013-01-07T21:32:30.533 回答
0

只是玩弄你的小提琴，我做了这些改变

$('.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();
});
于 2013-01-07T21:45:00.693 回答