jQuery UI Tabs添加类 [英] Jquery UI Tabs add class
本文介绍了jQuery UI Tabs添加类的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
下面是我为选项卡设置的HTML,它们都工作正常,我想通过将包含div的外部类(id = tab-wrap class = bike)的类更改为显示的任何选项卡来对其进行扩展.想法是基于选项卡更改背景图像.
Below is my HTML set up for the tabs which all works fine, i want to extend it a bit by changing the class of the outer containing div (id=tab-wrap class=bike) to whatever tab is showing. The idea is to change the background image based on the tab.
<div id="tab-wrap" class="bike">
<div id="batter-finder">
<h1>Battery Finder</h1>
<p>Choose Your Application then find your battery</p>
<div id="tabs">
<ul>
<li><a href="#bike">Bike</a></li>
<li><a href="#atv">ATV</a></li>
<li><a href="#utv">UTV</a></li>
<li><a href="#snow">Snow</a></li>
<li><a href="#water">Water</a></li>
</ul>
<div id="bike">
<p>Bike content</p>
</div>
<div id="atv">
<p>ATV content</p>
</div>
<div id="utv">
<p>UTV content</p>
</div>
<div id="snow">
<p>Snow content</p>
</div>
<div id="water">
<p>Water content</p>
</div>
</div> <!-- /tabs -->
</div>
</div>
因此,如果我选择水"标签,我想将类别从以下位置更改:
So if i select the tab "water" i'd like to change the class from:
<div id="tab-wrap" class="bike">
到
<div id="tab-wrap" class="water">
优雅的淡入/淡出更改会很好.我的jQuery如下
An elegant fade in/out change would be good. My jquery is as follows
$(document).ready(function() {
$("#tabs").tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
});
感谢帮助 谢谢
推荐答案
您可以这样做,
$("#tabs").tabs({
fx: { height: 'toggle', opacity: 'toggle' },
select: function(event, ui) {
$("#tab-wrap").attr('class', ui.panel.id);
}
});
这篇关于jQuery UI Tabs添加类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文