tab选项卡切换效果应用到很多网页中，今天总结了一个超简单的切换效果，相信你一看就能学会。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://www.w3school.com.cn//jquery/jquery-1.11.1.min.js"></script>
<title>tab选项卡切换</title>
<style>
* {
list-style: none;
}
#outer {
width: 450px;
margin: 150px auto;
background: #fff;
}
#tab {
width: 409px;
border: #ccc solid 1px;
margin: 50px auto 0 auto;
}
#tab li {
float: left;
color: #7c4b04;
height: 30px;
cursor: pointer;
line-height: 30px;
padding: 0 20px;
}
#tab li.current {
color: #fff;
background: blue;
}
#content {
border: 1px solid #ccc;
border-top-width: 0;
height: 223px;
}
#content ul {
line-height: 25px;
display: none;
margin: 0 30px;
padding: 40px 0;
}
#content ul li {
line-height: 28px;
}
#content ul li a {
cursor: pointer;
}
</style>
</head>
<body>
<div id="outer">
<ul id="tab">
<li class="current">今日热搜</li>
<li>体育新闻</li>
<li>css3</li>
</ul>
<div id="content">
<ul style="display: block;">
<li>
<a>女子网上晒猫被泸州老窖索赔20万</a>
</li>
<li>
<a>韩国丈夫陪妻子打疫苗，得知资金也可以打后，瞬间激动得满眼放光</a>
</li>
<li>美国出现“招魂女孩”，现场表演异能，评委吓得逃走了</li>
</ul>
<ul>
<li>
<a>CBA三分王耍大牌</a>
</li>
<li>
<a>欧协杯附件赛传捷报，穆里尼奥罗马首秀获胜</a>
</li>
<li>
<a>096期体彩大乐透晒票，看着开奖结果，彩民笑了</a>
</li>
</ul>
<ul>
<li>tab3</li>
</ul>
</div>
</div>
<script>
$(function () {
$("#tab li").mouseover(function () {
var index = $(this).index();
$(this).addClass('current').siblings().removeClass('current');
$("#content ul").eq(index).css("display", "block").siblings().css("display", "none")
})
})
</script>
</body>
</html>
相关推荐
-
你们旧手机怎么处理（旧手机的处理方法）
几乎每一位当代人都会遇到一个灵魂拷问：“准备换新手机，旧手机应该如何处理？” 作为一名90后互联网青年，在寸土寸金的房租压力下，俞文还是舍不得扔掉曾陪伴过她的旧手机。早些年，把淘汰下来的旧手机寄给家...
-
学士服颜色代表什么意思（大学学士服颜色分类区别）
马上就要到毕业季了，小编最近也开始拍毕业照了，细心的同学们可能会发现不同专业的学士服好像不太一样，其实这里面也是有学问在的~ 其实学士服分成6种颜色，下面小编来介绍一下这6种颜色的含义~ 粉色衣领学士服 粉...
-
创业注册公司的流程（注册公司的注册流程）
不管公司想要做多大，多出名。第一步肯定是要先注册一个公司，但很多创业者完全不懂，不知道该怎么注册公司，也不知道需要哪些资料，今天联贝小编就给大家带来了注册公司的详细流程，很多创业者第一步就弄错了，导致...
-
手机屏幕维修的注意事项有哪些（关于手机屏幕维修的注意事项）
一、我为什么写这篇文章： 1.我手机屏幕坏过。 2.我手机屏幕找别人修过。 3.我手机屏幕自己修过。 3.大家手机屏幕时常会出现小问题。 二、我的屏幕维修经历 我的手机型号是 华为nova5pro .第一次坏是往口袋装的时候...
-
数据有效性填充整行颜色（行根据内容自动填充颜色）
Hello,大家好,今天跟大家分享下我们如何通过控制一个类别的值,来为数据整行填充一个颜色,如下图,当我们更改姓名的时候数据区域的数据就会随着姓名的发生改变,这个的操作也非常简单,下面就让我们来一起操作下，仅需2...
-
空调多少度最省电制冷（空调多少度最省电晚上）
空调多少度最省电呢？ 今天赵宇和大家来讨论一下这个问题，那么空调怎么设定最省电呢？ 1，睡觉的时候打开睡眠模式，打开睡眠模式确实能起到省电的作用，空调在你睡了以后会慢慢调节温度，使温度慢慢上升，调节适合...