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 に答える