jquery手风琴标签

时间:2012-04-23 20:24:45

标签: php jquery css wordpress

我正在尝试使用jquery手风琴选项卡在单击时在标签的顶部和底部显示不同的内容

如果您查看以下网站

http://www.eset.com/us/#tab=fbus

您应该看到两个标签用于商业用户,另一个用于家庭标签,当您选择商家标签时,标签上方的图片会随标签内容一起更改。

我怎么能在jQuery JavaScript中做到这一点?

我想知道是否有人可以提供帮助!

谢谢

1 个答案:

答案 0 :(得分:1)

类似

的东西

html

<div class="fhome tabed">fhome Content 01 </div>
<div class="fbus tabed" style="display:none;">fbus Content 02 </div>
<ul id="Tabs">
    <li><a href="#tab=fhome">Tab 01 </a></li>
    <li><a href="#tab=fbus">Tab 01 </a></li>
</ul>
<div class="fhome tabed">fhome Content 01 </div>
<div class="fbus tabed" style="display:none;">fbus Content 02 </div>

和jQuery

$(document).ready(function(){   
$('#Tabs li a').click(function(){
        $('.tabed').hide();
        var Shdiv = $(this).attr('href').split('=')[1]
        $('div.'+Shdiv).show();
    });
})