HTML中如何实现选项卡切换效果。
1个回答
展开全部
body部分
<div class="lanrenzhijia">
<div class="tab">
<a href="javascript:;" class="on">js特效</a>
<a href="javascript:;">flash素材</a>
<a href="javascript:;">亚当学院</a>
<a href="javascript:;">在线客服代码</a>
</div>
<div class="content">
<ul>
<li style="display:block;">js特效内容</li>
<li>flash素材内容</li>
<li>亚当学院内容</li>
<li>在线客服代码内容</li>
</ul>
</div>
</div>
代码部分
$(function(){
$(".lanrenzhijia .tab a").mouseover(function(){
$(this).addClass('on').siblings().removeClass('on');
var index = $(this).index();
number = index;
$('.lanrenzhijia .content li').hide();
$('.lanrenzhijia .content li:eq('+index+')').show();
});
<div class="lanrenzhijia">
<div class="tab">
<a href="javascript:;" class="on">js特效</a>
<a href="javascript:;">flash素材</a>
<a href="javascript:;">亚当学院</a>
<a href="javascript:;">在线客服代码</a>
</div>
<div class="content">
<ul>
<li style="display:block;">js特效内容</li>
<li>flash素材内容</li>
<li>亚当学院内容</li>
<li>在线客服代码内容</li>
</ul>
</div>
</div>
代码部分
$(function(){
$(".lanrenzhijia .tab a").mouseover(function(){
$(this).addClass('on').siblings().removeClass('on');
var index = $(this).index();
number = index;
$('.lanrenzhijia .content li').hide();
$('.lanrenzhijia .content li:eq('+index+')').show();
});
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
微测检测5.10
2023-05-10 广告
2023-05-10 广告
您好!建议咨 深圳市微测检测有限公司,已建立起十余个专业实验室,企业通过微测检测就可以获得一站式的测试与认 证解决方案;(EMC、RF、MFi、BQB、QI、USB、安全、锂电池、快充、汽车电子EMC、汽车手机互 联、语音通话质量),认证遇...
点击进入详情页
本回答由微测检测5.10提供
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询