网页中我们经常会用到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”的值
,发光并非太阳的专利,你也可以发光