Jquery实现Tabs标签页选项卡功能
以下便是通过Jquery实现Tabs标签页选项卡功能的完整代码，原理就是事件上加了hide()和show()方法，此方法就是jq隐藏和显示的方法，显示和隐藏与display:none; display:block的实现原理一样。...
以下便是通过Jquery实现Tabs标签页选项卡功能的完整代码，原理就是事件上加了hide()和show()方法，此方法就是jq隐藏和显示的方法，显示和隐藏与display:none; display:block的实现原理一样。
效果图：
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<style type="text/css">
.help_menu{width:720px; background:url(/images/linebg2_03.png) repeat-x bottom left; overflow:hidden; border-left:1px solid #dfdfdf;}
.help_menu p{ float:left; height:42px; border-right:1px solid #dfdfdf; }
.help_menu p a{ display:block; height:40px; padding:0 20px; line-height:40px; font-size:14px; font-weight:bold; color:#333;border-top:1px solid #dfdfdf; }
.help_menu p a:hover{height:40px; border-top:2px solid #ff4c00; background:#fff; color:#ff4c00;}
.help_menu p .mo11{height:40px; border-top:2px solid #ff4c00; background:#fff; color:#ff4c00;}
.help_conten{ width:678px; padding:20px 20px 120px 20px; overflow:hidden; border:1px solid #dfdfdf;border-top:none;}
.hide{display:none;}
</style>
</head>
<body>
<!--分类-->
<div class="help_menu">
<p><a href="javascript:" class="mo11">帮助中心</a></p>
<p><a href="javascript:">网站地图</a></p>
<p><a href="javascript:">意见反馈</a></p>
</div>
<!--帮助中心正文-->
<div class="help_conten">
帮助中心
</div>
<!--网站地图正文-->
<div class="help_conten hide">
网站地图
</div>
<!--意见反馈正文-->
<div class="help_conten hide">
意见反馈
</div>
<script type="text/javascript">
$(function () {
$(".help_menu p").bind("mouseover", function () {
var index = $(this).index();//当前页索引
$(".help_menu p a").removeClass("mo11");//全部选项卡设置为未选中
$(this).find("a").addClass("mo11");//当前选项卡选中
$(".help_conten").hide();//隐藏所有选项卡
$(".help_conten").eq(index).show();//显示当前选项卡
});
});
</script>
</body>
</html>
- 发表于 2020-07-14 15:47
- 阅读 ( 571 )
- 分类：web前端开发
