jquery制作的tab标签切换选项卡

关注

原创最新推荐文章于 2026-07-17 16:39:37 发布 1.2k 阅读 AI 写同款· GEO 优化 ›

jQuery项目案例(二):Tab选项卡切换 jQuery项目案例二:Tab选项卡切换项目介绍项目效果图项目核心知识点jQuery选择器jQuery事件类型jQuery标签操作项目源代码HTML代码CSS样式JS代码项目介绍网页页面中最流行常用的tab切换效果，包括滑动、点击切换等多种效果。项目效果图项目核心知识点 jQuery选择器 $(".nav li") jQuery事件类型 $(".nav li").mouseenter... 阅读详情

在线演示地址：评论1楼

复制代码无需任何修改可以看到效果

1 base.css文件

*{color:#fff;margin:0px;padding:0px;font-family:Georgia, "Times New Roman", Times, serif;font-size:16px;}
body{background-image:url(../images/bg.jpg);}
a{text-decoration:none;outline: none;}
a:active {star:expression(this.onFocus=this.blur());}
ul,li{list-style:none;}
.clear {clear:both;}

#nav{height:40px;margin-bottom:-2px;}
#nav li{text-align:center;float:left;margin-right:3px;border-radius:8px 8px 0px 0px;}
#nav li.tabFocus{font-weight:bold;z-index:100;position:relative;background-color:black;}
#nav li a{width:100px;display:block;padding:8px;padding-top:12px;}

#content{width:1200px;height:auto;margin-left:auto;margin-right:auto;background-color:black;border-radius:5px;}
#content .aside_left{width:870px;height:auto;float:left;overflow:hidden;margin-left:20px;display:inline;}

2 index.html文件

<!DOCTYPE html>
 <html lang="zh-CN">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <meta name="baidu-tc-verification" content="55df68f711d2c61f5404932286e27233" />
<title>学习笔记</title>
<link href="stylesheet/base.css" type="text/css" rel="stylesheet"/>
<script src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="nav">
     <li class="tabFocus " style="margin-left:50px;" ><a href="#">Home</a></li>
    <li ><a href="#">html5</a></li>
    <li ><a href="#">css3</a></li>
    <li ><a href="#">jquery</a></li>
    <li ><a href="#">ExtJS</a></li>
    <li ><a href="#">IE6兼容</a></li>
    <li ><a href="#">时间轴</a></li>
</div>

<div id="content">
    <ul class="aside_left">
    	<li class="conFocus">  1 </li>
        <li>  2 </li>        <li>  3 </li>

        <li>  4 </li>

        <li>  5 </li>

        <li>  6 </li>

        <li>  7 </li>

</ul> </div></body></html>

3. js文件写在index.htmlde head中为了查看的方便

 <script>
	$(function(){
		$("#content .aside_left>li").hide();
		$("#content .aside_left>li.conFocus").show();
		$("#nav li").each(function(index){
			$(this).click(function(){
				$("#nav li.tabFocus").removeClass("tabFocus");
				$(this).addClass("tabFocus");
				$(".aside_left>li:eq("+index+")").show().siblings().hide();
				});
		});
	});
 </script>

代码很简单，基本没有需要讲的代码。对你有用的话就拿去用吧。

收录于