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
最佳答案
你可以在当前可见的 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')
});
}
关于jquery - 使用 jquery 的多功能选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14204164/