利用JQuery中的排他算法实现tab切换
排他算法:将所有tab栏对象设置为默认样式,然后将当前tab栏更改为目标样式
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./code.jquery.com_jquery-3.7.1.js"></script>
<style>
body {
padding: 10rem;
}
ul {
list-style: none;
width: 70px;
padding: 0;
display: inline-block;
}
ul li {
width: auto;
margin: .825rem 0rem;
}
img {
height: 111%;
object-fit: contain;
}
.demo {
width: 646px;
height: 386px;
top: 197px;
position: absolute;
display: inline-block;
}
.demo div {
width: 646px;
height: 386px;
overflow: hidden;
}
button {
border: 0;
font-size: 16px;
width: 100%;
padding: 5px 10px;
}
</style>
</head>
<body>
<!-- 按钮部分 -->
<ul>
<li><button>按钮1</button></li>
<li><button>按钮2</button></li>
<li><button>按钮3</button></li>
<li><button>按钮4</button></li>
<li><button>按钮5</button></li>
<li><button>按钮6</button></li>
<li><button>按钮7</button></li>
<li><button>按钮8</button></li>
<li><button>按钮9</button></li>
</ul>
<!-- 照片部分 -->
<div class="demo">
<div><img src="./img/img0.jpg"></img></div>
<div><img src="./img/img1.jpg"></img></div>
<div><img src="./img/img2.jpg"></img></div>
<div><img src="./img/img3.jpg"></img></div>
<div><img src="./img/img4.jpg"></img></div>
<div><img src="./img/img5.jpg"></img></div>
<div><img src="./img/img6.jpg"></img></div>
<div><img src="./img/img7.jpg"></img></div>
<div><img src="./img/img8.jpg"></img></div>
</div>
</body>
<script>
$(function () {
// 初始化按钮样式
$("ul li:first button").css("background", "pink");
$(".demo div").hide();
$(".demo div").eq(0).show();
$("ul li button").click(function () {
$("li button").css("background", "");
$(this).css("background", "pink");
//获取当前按钮所在的索引
var index = $(this).parent().index();
//获取照片的索引
var items = $(".demo div");
//利用排他算法,将照片显示出来
$(".demo div").hide();
$(".demo div").eq(index).show();
})
})
</script>
</html>