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

最新推荐文章于 2024-08-25 15:44:54 发布

touchandy

最新推荐文章于 2024-08-25 15:44:54 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/touchandy/article/details/8510009

jquery 专栏收录该内容

8 篇文章

订阅专栏

本文提供了一个简单的HTML5、CSS3和jQuery交互应用示例，展示如何使用CSS来设计网页布局，并通过jQuery实现页面元素的动态交互。代码包括基础的HTML结构、CSS样式定义以及jQuery事件处理，旨在帮助开发者理解前端开发中CSS与JavaScript的整合运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在线演示地址：评论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>

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