效果一：
<!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>
1281
