In the process of building a website, sometimes it is necessary to make effective use of page space. It is necessary to place the links, pictures, videos and other website resources of multiple modules in a div, and click or slide to display multiple modules, which are mostly used to display the website in the sidebar. The latest update, the hottest article, or the content of multiple columns under the top channel page. In fact, CSS can also achieve this effect, but it is still convenient without jQuery. The following is a jQuery written by learning jQuery today to achieve tab switching Column special effects, to realize the demo of multiple modules click switch.
Html and jQuery code:
<!doctype html>
<html lang="ch-ZN">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tab切换栏选项卡jQuery特效</title>
<link rel="stylesheet" href="tab.css">
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<main class="main">
<div class="recommend-article container">
<ul class="navTab">
<li class="active">最新文章</li>
<li>热门文章</li>
<li>热门点击</li>
</ul>
<div class="article-item">
<ul>
<li><a href="#">简单实现jQuery鼠标经过切换图片特效简单实现jQuery鼠标经过切换图片特效</a></li>
<li><a href="#">简单实现jQuery鼠标经过切换图片特效</a></li>
<li><a href="#">简单实现jQuery鼠标经过切换图片特效</a></li>
<li><a href="#">简单实现jQuery鼠标经过切换图片特效</a></li>
<li><a href="#">简单实现jQuery鼠标经过切换图片特效</a></li>
<li><a href="#">简单实现jQuery鼠标经过切换图片特效</a></li>
<li><a href="#">简单实现jQuery鼠标经过切换图片特效</a></li>
<li><a href="#">简单实现jQuery鼠标经过切换图片特效</a></li>
<li><a href="#">简单实现jQuery鼠标经过切换图片特效</a></li>
<li><a href="#">简单实现jQuery鼠标经过切换图片特效</a></li>
</ul>
<ul>
<li><a href="#">利用jQuery制作的导航下拉菜单效果</a></li>
<li><a href="#">利用jQuery制作的导航下拉菜单效果</a></li>
<li><a href="#">利用jQuery制作的导航下拉菜单效果</a></li>
<li><a href="#">利用jQuery制作的导航下拉菜单效果</a></li>
<li><a href="#">利用jQuery制作的导航下拉菜单效果</a></li>
<li><a href="#">利用jQuery制作的导航下拉菜单效果</a></li>
<li><a href="#">利用jQuery制作的导航下拉菜单效果</a></li>
<li><a href="#">利用jQuery制作的导航下拉菜单效果</a></li>
<li><a href="#">利用jQuery制作的导航下拉菜单效果</a></li>
<li><a href="#">利用jQuery制作的导航下拉菜单效果</a></li>
</ul>
<ul>
<li><a href="#">用PHP中的for循环写的乘法口诀运算表</a></li>
<li><a href="#">用PHP中的for循环写的乘法口诀运算表</a></li>
<li><a href="#">用PHP中的for循环写的乘法口诀运算表</a></li>
<li><a href="#">用PHP中的for循环写的乘法口诀运算表</a></li>
<li><a href="#">用PHP中的for循环写的乘法口诀运算表</a></li>
<li><a href="#">用PHP中的for循环写的乘法口诀运算表</a></li>
<li><a href="#">用PHP中的for循环写的乘法口诀运算表</a></li>
<li><a href="#">用PHP中的for循环写的乘法口诀运算表</a></li>
<li><a href="#">用PHP中的for循环写的乘法口诀运算表</a></li>
<li><a href="#">用PHP中的for循环写的乘法口诀运算表</a></li>
</ul>
</div>
</div>
</main>
<script>
$(function () {
$(".navTab li").click(function () {
$(this).addClass("active").siblings().removeClass("active");
var index =$(this).index();
$(".article-item ul").eq(index).show().siblings().hide();
})
})
</script>
</body>
</html>css part of the code:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: "Microsoft YaHei UI Light";
font-size: 14px;
color: #666;
}
body ul li{
list-style: none;
}
body a{
color: #333;
text-decoration: none;
}
body a:hover{
color: #F06868;
}
.main{
margin-top: 20px;
}
.container{
width: 360px;
margin:0 auto;
}
.recommend-article {
padding: 15px;
background-color:#ddd;
}
.recommend-article .navTab{
margin: 10px 0;
font-size: 16px;
font-weight: 600;
border-bottom: 1px solid #fff;
}
.recommend-article .navTab li{
display:inline-block;
padding: 5px;
border: 1px solid #f5f5f5;
border-bottom: none;
background-color: #fff;
border-radius: 10px 10px 0 0;
}
.recommend-article .navTab li.active{
background-color:#df5000;
color: white;
}
.recommend-article .article-item{
max-height: 257px;
padding: 10px;
line-height: 24px;
overflow: hidden;
border: 1px solid #fff;
}
.recommend-article .article-item ul li{
counter-increment: number;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.recommend-article .article-item ul li::before{
display: inline-block;
width: 16px;
height: 16px;
margin-right: 5px;
font-weight: 600;
text-align: center;
content: counter(number);
}
.recommend-article .article-item ul li:nth-child(1)::before{
color: rgba(255,0,0,.8);
}
.recommend-article .article-item ul li:nth-child(2)::before{
color: rgba(255,0,0,.6);
}
.recommend-article .article-item ul li:nth-child(3)::before{
color: rgba(255,0,0,.4);
}In the Css section, you need to set the height (article-item) of the container box where the content is placed, otherwise the content of all modules will be displayed in the first module when the page is refreshed.
Effect picture:
