自丢网
标题:
利用jquery制作简单tab选项卡切换效果案例代码教程
[打印本页]
作者:
admin
时间:
2020-3-13 16:27
标题:
利用jquery制作简单tab选项卡切换效果案例代码教程
利用jquery制作简单tab切换效果案例代码教程
第一步:引入jQuery.js
第二步:css写入
第三步:html代码,如下
<div class="zidiu">
<div class="nav">
<ul>
<li class="cur">
<a href="">自丢网</a>
</li>
<li>
<a href="">关于我们</a>
</li>
<li>
<a href="">产品中心</a>
</li>
<li>
<a href="">新闻中心</a>
</li>
<li>
<a href="">联系我们</a>
</li>
</ul>
</div>
<div class="content">
<ul>
<li>
<a href="">自丢网</a>
</li>
<li>
<a href="">关于我们</a>
</li>
<li>
<a href="">产品中心</a>
</li>
<li>
<a href="">新闻中心</a>
</li>
<li>
<a href="">联系我们</a>
</li>
</ul>
</div>
</div>
复制代码
JS代码(重点):
<script>
$(function() {
$('.nav ul li').mouseover(function() {
$(this).addClass('cur').siblings().removeClass('cur');
var index = $(this).index();
$('.content ul li').eq(index).show().siblings().hide();
});
});
</script>
复制代码
欢迎光临 自丢网 (https://www.zidiu.com/)
Powered by Discuz! X3.5