ウェブサイトを構築する過程で、ページスペースを有効に活用する必要がある場合があります。複数のモジュールのリンク、写真、ビデオ、その他のウェブサイトリソースをdivに配置し、クリックまたはスライドを実現して複数のモジュールを表示する必要があります。 、およびそれを使用して、サイドバーにWebサイトを表示します。最新の更新、最もホットな記事、またはトップチャネルページの下の複数の列のコンテンツ。実際、CSSでもこの効果を実現できますが、jQueryがなくても便利です。以下は、タブ切り替え列の特殊効果を実現し、複数のモジュールのクリック切り替えのデモを実現するために、今日jQueryを学習して作成されたjQueryです。
HtmlおよびjQueryコード:
<!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部分:
*{
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);
}
Cssセクションで、コンテンツが配置されるコンテナボックスの高さ(article-item)を設定する必要があります。そうしないと、ページが更新されたときにすべてのモジュールのコンテンツが最初のモジュールに表示されます。
効果画像: