回复
选项卡切换 原创
深处莫神
发布于 2022-8-10 15:35
浏览
0收藏
选项卡切换
思路：
1.在进行选项卡切换的时候，是每个a标签进行的切换，而在取元素的时候取到的是整个a元素的数组，为了区分每个a元素，我们就可以给元素设置一个data-开头的自定义属性，使元素按照顺序排列下标
2.菜单点击时候进行两个操作，中间内容每个都装在同样大小的盒子里，在点击菜单后触发函数，函数进行两个操作，一个是中间内容的位置移动来切换对应的文本内容。一个是顶部a标签的背景颜色的灰白变化。
3.a标签的背景颜色的灰白变化，每次选中后颜色变化后，在下一次进行前先进行循环把颜色置为灰色，然后根据索引来控制选中的标签底色变为白色。
4.同理，通过大盒子左边在的位置，引用位置数组的索引来控制内容的切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 800px;
height: 600px;
border: 4px solid #000;
}
#menu {
width: 100%;
display: inline-block;
height: 100px;
line-height: 100px;
display: flex;
justify-content: space-between;
align-items: center;
}
#menu a {
/* border: 3px solid red; */
width: 25%;
text-align: center;
line-height: 100px;
height: 100px;
text-decoration: none;
font-size: 30px;
color: #000;
font-weight: bold;
background-color: #6c6c6c;
}
#menu a:first-child {
background-color: #fff;
}
#content {
width: 3200px;
height: 500px;
/* border: 4px solid red; */
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
left: 0;
transition: all ease-in-out .4s;
}
.item {
width: 800px;
height: 500px;
line-height: 500px;
/* border-right: 5px solid blue; */
text-align: center;
font-size: 50px;
font-weight: bold;
}
.box {
overflow-x: hidden;
}
</style>
</head>
<body>
<div id="box">
<!-- 导航 -->
<nav id="menu">
<a href="javascript:void(0)">国内新闻</a>
<a href="javascript:void(0)">国际新闻</a>
<a href="javascript:void(0)">体育新闻</a>
<a href="javascript:void(0)">娱乐新闻</a>
</nav>
<div class="box">
<div id="content">
<div class="item">国内新闻</div>
<div class="item">国际新闻</div>
<div class="item">体育新闻</div>
<div class="item">娱乐新闻</div>
</div>
</div>
</div>
</body>
</html>
<script>
var nav = document.getElementsByTagName('a')
var content = document.getElementById('content')
var menu = document.getElementById('menu')
var position = ['0px', '-800px', '-1600px', '-2400px']
var T;
var index = 0
// 循环
for (i = 0; i < nav.length; i++) {
nav[i].dataset.index = i;
}
menu.onclick = function (e) {
index = e.target.dataset.index
// 每次点击后 等再次点击时，先进行循环，把选项卡颜色更改为灰色，否则选中过的会保持上次选中时的白色
for (var i = 0; i < nav.length; i++) {
nav[i].style.background = '#6c6c6c'
}
nav[index].style.background = '#fff'
content.style.left = position[index]
}
function autoplay() {
if (index >= nav.length - 1) {
index = 0
}
else {
index++
}
for (var i = 0; i < nav.length; i++) {
nav[i].style.background = '#6c6c6c'
}
nav[index].style.background = '#fff'
content.style.left = position[index]
}
box.onmouseover = function () {
clearInterval(T)
}
box.onmouseout = function () {
T = setInterval(autoplay, 600)
}
</script>
### 选项卡+移入移出类应用
```javascript
<script>
$(function () {
$('.tab>li').mouseenter(function () {
$(this).addClass('active').siblings('li').removeClass('active')
// $(this).siblings().active = false
var idx = $(this).index()
$('.products>div').eq(idx).show().siblings('div').hide();
})
})
</script>
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrapper {
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top: 100px;
}
.tab {
border: 1px solid #ddd;
border-bottom: 0;
height: 36px;
width: 320px;
}
.tab li {
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #fff;
}
.tab span {
position: absolute;
right: 0;
top: 10px;
background: #ddd;
width: 1px;
height: 14px;
overflow: hidden;
}
.products {
width: 1002px;
border: 1px solid #ddd;
height: 476px;
}
.products .main {
float: left;
display: none;
}
.products .main.selected {
display: block;
}
.tab li.active {
border-color: red;
border-bottom: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">国际大牌<span>◆</span></li>
<li class="tab-item">国妆名牌<span>◆</span></li>
<li class="tab-item">清洁用品<span>◆</span></li>
<li class="tab-item">男士精品</li>
</ul>
<div class="products">
<div class="main selected">
<a href="###"><img src="./assets/img/1.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="./assets/img/2.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="./assets/img/3.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="./assets/img/4.jpg" alt="" /></a>
</div>
</div>
</div>
</body>
</html>
<script src="./assets/js/jquery-1.9.1.min.js"></script>
<script>
$(function () {
$('.tab>li').mouseenter(function () {
$(this).addClass('active').siblings('li').removeClass('active')
// $(this).siblings().active = false
var idx = $(this).index()
$('.products>div').eq(idx).show().siblings('div').hide();
})
})
</script>
©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任
分类
标签
已于2022-8-16 17:50:44修改
赞
收藏
回复
相关推荐
