如何用jquery控制tab切换

网页中我们经常会用到tab切换的效果,下面由68ecshop的技术来为您讲解如何用jquery控制tab切换

首先我们要下载一个jquery,比如:jquery-1.6.2.min.js(去jquery的官网下载最新的jquery库就可以啦)

1、html

<ul class="choose-title"> <li class="title-tab cur" data-gift="choose-gift-1">切换1</li> <li class="title-tab" data-gift="choose-gift-2">切换2</li></ul>

<div>

<div id="choose-gift-1"> 切换一内容</div><div id="choose-gift-2"> 切换二内容</div>

</div>

2、js

<script type="text/javascript">$(‘.choose-title li’).click(function(){ $(this).addClass(‘cur’).siblings().removeClass(‘cur’); //切换选项卡标签的class $(‘#’+$(this).data(‘gift’)).show().siblings().hide();//切换选项卡内容的显示/隐藏});</script>

讲解:

.choose-title li———获取的是class为“choose-title”的标签下的 所有li标签

$(this).data(‘gift’)——获取的是“data-gift”的值

,发光并非太阳的专利,你也可以发光

如何用jquery控制tab切换

相关文章:

你感兴趣的文章:

标签云: