使用jQuery插件实现头部导航简单切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.nav ul {
display: flex;
height: 65px;
line-height: 65px;
text-align: center;
box-sizing: border-box;
list-style: none;
}
.nav ul>li {
font-size: 18px;
color: #aaaaaa;
flex: 1;
cursor: pointer;
background: blue;
}
.nav ul>li.on {
color: #ffffff;
font-weight: bold;
}
.con {
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li class="on">导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
<li>导航5</li>
<li>导航6</li>
</ul>
</div>
<div class="nav_con">
<div class="con" style="display: block;">内容1</div>
<div class="con" style="display: block;">内容2</div>
<div class="con" style="display: none;">内容3</div>
</div>
</body>
<!-- 引入jQuery插件,否则,无法实现切换效果 (ps:根据自己保存的jQuery插件的位置来引入)-->
<script src="js/jquery-3.2.1.min.js"></script>
<script>
$(function () {
tab(".nav ul", ".nav_con", "on", "click");
function tab(nav,content,on,type){
$(nav).children().bind(type, (function () {
let tab = $(this);
let tab_index = tab.prevAll().length;
$(nav).children().removeClass(on);
tab.addClass(on);
$(content).children().hide();
$(content).children().eq(tab_index).show();
}))
}
})
</script>
</html>
第一篇博客,如有不对的地方,请多多指教!