table标签选项的切换
需求：点击下面的板块上面的板块进行相应得变化。
获取下面所有的板块，并添加点击事件，利用派他思想完成点击板块及换色的功能；将上面的板块与下面的板块联系起来，用什么来联系呢？利用函数查找点击的下面板块的是哪一个，然后即将相对应得上面的板块更改背景颜色及文字，这里也要用到排他思想。
<style>
.box {
width: 300px;
height: 500px;
border: 1px solid black;
border-radius: 10px;
}
.content {
width: 100%;
height: 400px;
background-color: pink;
border-radius: 10px 10px 0 0;
}
.show {
/* visibility: hidden; */
text-align: center;
line-height: 400px;
display: none;
}
.show:first-child {
display: block;
}
.search {
width: 100%;
height: 95px;
display: flex;
justify-self: flex-start;
}
.choose {
width: 90px;
height: 100%;
background-color: aquamarine;
margin: 0 3px;
text-align: center;
border-radius: 0 0 10px 10px;
}
.choose:first-child {
background-color: pink;
}
</style>
<body>
<div class="box">
<div class="content">
<div class="show">我是home</div>
<div class="show">这里是html</div>
<div class="show">my就是我</div>
<div class="show">set在这里</div>
</div>
<div class="search">
<div class="choose">home</div>
<div class="choose">html</div>
<div class="choose">my</div>
<div class="choose">set</div>
</div>
<script>
//获取自己是父元素中的第几个子元素/节点
Object.prototype.index2 = function () {
var arr = this.parentElement.children
for (let i = 0; i < arr.length; i++) {
if (arr[i] === this) {
return i
}
}
}
</script>
<script>
var btns = document.querySelectorAll(".choose")
for (let i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
btns.forEach(function (el) {
el.style.backgroundColor = "aquamarine"
})
btns[i].style.backgroundColor = "pink"
var a=btns[i].index2()
var shows = document.querySelectorAll('.show')
shows.forEach(function(el){
el.style.display='none';
})
shows[a].style.display="block"
shows[a].style.backgroundColor="pink"
}
}
</script>
435
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
