jq的tab选项卡

效果一：在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{width: 500px;height: 400px;border: solid 1px black;margin: 20px auto;}
			.box ul{margin: 0;padding: 0;list-style: none;height: 40px;line-height
			:40px;display: flex;background: #ccc;text-align: center;}
			.box li{flex:1;border-left: solid 1px black;border-right: solid 1px black;}
			.box li.active{background: red;}

			.cont{}
			.cont div{width: 500px;height: 360px;display: none;}
			.cont .cont1{background: #f0f;display: block;}
			.cont .cont2{background: #f00;}
			.cont .cont3{background: #00f;}
			.cont .cont4{background: #0ff;}
		</style>
	</head>
	<body>
	   <div class="box">
	        <ul><li class="active">新闻</li><li>广告</li><li>招聘</li><li>介绍</li></ul>
	        <div class="cont">
	            <div class="cont1">第一个选项卡的内容区域，111111</div>
	            <div class="cont2">第二个选项卡的内容区域，222222222</div>
	            <div class="cont3">第三个选项卡的内容区域，333333</div>
	            <div class="cont4">第四个选项卡的内容区域，444444</div>
	        </div>
	    </div>
	</body>
	<script src="../jQuery.js"></script>//可自行在官网下载引入
	<script type="text/javascript">
		// 点击li，设置当前项，操作对应内容区域
		$(".box").find("li").click(function(){
			// 先取消所有，再给当前加

			// 先给当前加，然后取消其他兄弟
			// 此处的this，默认找到的是原生js的DOM对象
			//console.log(this);
			
			$(this).addClass("active").siblings().removeClass("active");
			
			// 获取当前点击元素的索引
			// console.log($(this).index());
			
			$(".cont").children("div").css("display","none").eq($(this).index()).css("display","block");

		})
		
	</script>
</html>

效果二：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入外部文件-->
		<style type="text/css">
			/*全局设置*/
			*{
				padding: 0px;
				margin: 0px;
				font-size: 12px;
			}
			
			
			/*设置所有的无序列表*/
			ul{
				list-style: none;
			}
			
			/*整体设置*/
			#box{
				margin: 50px auto;
				width: 550px;
			}
			
			/*设置导航*/
			#menu{
				/*单词，rgb() ,#ffffff------>#fff*/
				background: #eee;
				/*处理溢出的部分*/
				overflow: hidden;
			}
			
			/*设置导航中的li*/
			#menu li{
				float: left;
				width: 85px;
				line-height: 30px;
				text-align: center;
				border: 1px solid #eee;
				border-bottom-color: #ccc;
				border-top-width: 2px;
				cursor: pointer;	
			}
			
			/*设置导航被选中的样式*/
			#menu .active{
				border-left-color: #ccc;
				border-right-color: #ccc;
				border-top-color: blue;
				border-bottom-color: #fff;
				background: #fff;
			}
			
			/*设置每一块的内容*/
			#panel .panel{
				/*将每一块都隐藏*/
				display: none;
				margin: 10px 0px;
				overflow: hidden;
			}
			
			/*单独设置第一块,将其显示*/
			#panel .active{
				/*block或者inline-block都可以*/
				display: block;
			}
			
			#panel .panel img{
				float: left;
			}
			
			#panel .panel .title{
				margin-left: 280px;
				padding-bottom: 10px;
				border-bottom:1px solid #ccc;
			}
			
			#panel .panel .list{
				margin-left: 280px;
			}
			
			#panel .panel .list li{
				float: left;
				line-height: 25px;
				margin-top: 10px;
				text-decoration: underline;
			}
		</style>
		
	<script src="../jQuery.js"></script>//需自行引入
	</head>
	<body>
		
		<!--整体-->
		<div id="box">
			<!--active:表示哪个块被选中-->
			<!--导航-->
			<ul id="menu">
				<li class="active">手机通讯</li>
				<li>手机通讯</li>
				<li>手机通讯</li>
				<li>手机通讯</li>
				<li>手机通讯</li>
				<li>手机通讯</li>
			</ul>
			
			<!--详细内容-->
			<div id="panel">
				<div class="panel active">
					<!-- <img src="img/images/1.jpg" /> -->
					<div class="title">京东家电1</div>
					<ul class="list">
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
					</ul>
				</div>
				
				<div class="panel">
				<!-- 	<img src="img/images/2.jpg" /> -->
					<div class="title">京东家电2</div>
					<ul class="list">
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
					</ul>
				</div>
				
				<div class="panel">
					<!-- <img src="img/images/3.jpg" /> -->
					<div class="title">京东家电3</div>
					<ul class="list">
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
					</ul>
				</div>
				
				<div class="panel">
					<!-- <img src="img/images/4.jpg" /> -->
					<div class="title">京东家电4</div>
					<ul class="list">
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
					</ul>
				</div>
				
				<div class="panel">
					<!-- <img src="img/images/5.jpg" /> -->
					<div class="title">京东家电5</div>
					<ul class="list">
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
					</ul>
				</div>
				
				<div class="panel">
					<!-- <img src="img/images/6.jpg" /> -->
					<div class="title">京东家电6</div>
					<ul class="list">
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
					</ul>
				</div>
			</div>
			
		</div>
		
		<script type="text/javascript">
			
			//页面加载响应函数
			$(function(){
				//给导航中的li添加单击事件
				$("#menu li").bind("click",function(){
					
					//一、导航的切换
					//1.清空所有li的class
					//$("#menu li").removeClass("active");
					
					
					//2.给选中的li添加新的class
					//eq():获取第几个子标签   
					//index()：获取当前被操作的标签的下标
					//$("#menu li").eq($(this).index()).addClass("active");
					
					
					//将上面的两部合并为一步：
					$("#menu li").removeClass("active").eq($(this).index()).addClass("active");
					
					//二、内容的切换
					$("#panel .panel").removeClass("active").eq($(this).index()).addClass("active");
				})
			})

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

效果三：
在这里插入图片描述

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            height: 400px;
            width: 400px;
            margin: 50px auto;
            border: 1px solid red;
            position: relative;
        }

        .head {
            height: 50px;
            width: 400px;
        }

        ul {
            list-style: none;
        }

        ul li {
            float: left;
            text-align: center;
            width: 100px;
            height: 50px;
            line-height: 50px;
        }

        .down {
            position: relative;
            height: 350px;
            width: 400px;
        }

        .down div {
            height: 100%;
            width: 100%;
            position: absolute;
            display: none;
        }

        .head ul li.select {
            border-bottom: 2px solid orange;
        }

        .down div.select {
            display: block;
        }

    </style>
    
</head>
<body>
<div class="box">
    <div class="head">
        <ul>
            <li class="select">腾讯</li>
            <li>百度</li>
            <li>淘宝</li>
            <li>微信</li>
        </ul>
    </div>
    <div class="down">
        <div class="select">腾讯腾讯腾讯腾讯</div>
        <div>百度百度百度百度</div>
        <div>淘宝淘宝淘宝淘宝</div>
        <div>微信微信微信微信</div>
    </div>
</div>
<script src="../jQuery.js"></script>//需自行引入
<script>
	var lis=$('.head li');
	var divs=$(".down div");
	
	var timer=null;
	lis.mouseenter(function(){
		
		var index=$(this).index();
		
		var that=this;
		//设置延迟显示
		timer=setTimeout(function(){
		//保持只有一个帝国时期	
			
		//去除class
		lis.removeClass('select');
		divs.removeClass('select');
		$(that).addClass("select");
		
		divs.eq(index).addClass('select');
		},1000)
	}).mouseleave(function(){
		clearTimeout(timer);
	})						
</script>
</body>
</html>

本文链接：https://blog.csdn.net/zyfacd/article/details/105415894

jq的tab选项卡

灰信网（软件开发博客聚合）

jQ写的tab选项卡

jq实现tab选项卡

JQ 选项卡

jq插件之tab选项卡切换

jquery实现的tab选项卡

layui的tab选项卡

案例：Tab选项卡

Tab选项卡效果

tab选项卡实现思路以及选项卡的右击菜单