image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
* {
list-style: none;
margin: 0;
padding: 0;
}
#tab ol li {
float: left;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid #333;
box-sizing: border-box;
background-color: #eee;
}
#tab ol li.active {
color: #fff;
background-color: #555;
}
#tab ul li {
width: 300px;
height: 180px;
line-height: 180px;
border: 1px solid #333;
box-sizing: border-box;
text-align: center;
display: none;
}
</style>
</head>
<body>
<div id="tab">
<ol class="control" style="overflow: hidden;">
<li class="active">新闻</li>
<li>财经</li>
<li>金融</li>
</ol>
<ul class="panel">
<li>新闻</li>
<li>财经</li>
<li>金融</li>
</ul>
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
var $Taoli = $('#tab ol li'); // 获取 顶部选项
var $Tauli = $('#tab ul li'); // 获取 底部面板
$Tauli.eq(0).show(); // 第一个面板 显示
$Taoli.on('click', function() {
// 给当前选中の选项添加 active 样式 、其他的兄弟选项去掉样式
$(this).addClass('active').siblings().removeClass('active');
// 给当前选中の面板 显示 、其他的兄弟面板 隐藏
$Tauli.eq($(this).index()).show().siblings().hide();
})
</script>
</body>
</html>