Jquery制作简单实用切换页tab的方法

最新推荐文章于 2023-10-08 19:49:47 发布

薇光网站建设

最新推荐文章于 2023-10-08 19:49:47 发布

阅读量186

点赞数

分类专栏：前端常用实例效果文章标签： tab css html html5 jquery

本文链接：https://blog.csdn.net/qq_17475727/article/details/106095470

版权

前端常用实例效果专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<style>
        *{box-sizing:border-box;}
		#nav{height:40px;}
		#nav a{display:block;height:40px;line-height:40px; width:100px; font-size:18px;text-align:center;float:left;background-color:#86cad7; border-bottom: 4px solid #fff; cursor:pointer;color: #fff;margin-right: 4px;}
		#nav a.on{background-color: #fad2cc; border-bottom-color: #fad2cc}
		#contentBox{width:308px;height:180px;}
		#contentBox .box{text-align:center;line-height:180px;font-size:24px;font-weight:blod;display:none;background-color: #fad2cc;color: #fff;}
		#contentBox .box.active{display:block;}
    </style>
</head>
<body>
	<div class="tab">
		<div id="nav">
		 <a class="on">tab1</a>
		 <a>tab2</a>
		 <a>tab3</a>
		</div>
		<div id="contentBox">
		 <div class="box active">第一部分</div>
		 <div class="box">第二部分</div>
		 <div class="box">第三部分</div>
		</div>
	</div>

	<script>

		$(function(){
		    $("#nav a").hover(function(){
		       var index = $(this).index();
		       $(this).addClass("on").siblings().removeClass("on");
		       $("#contentBox .box").eq(index).show().siblings().hide();
		     });
		  });  

	</script>
</body>
</html>

薇光网站建设

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery制作简单实用切换页tab的方法

引入js文件（引用在线版jq，离线版可在插件分类里下载）<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>一、HTML<div class="tab"> <nav id="nav"> <a class="on">tab1</a> <a>tab2</a> <a>tab3<
复制链接

扫一扫

专栏目录