代码题不会棒棒忙写下谢谢。zz

weixin_46183210 2020-01-12 07:50:56

...全文

55 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

jio可 2020-01-13

打赏
举报


<div class="demo">
  <div class="content">
    <div class="item">1</div>
    <div class="body">1-content</div>
    <div class="item">2</div>
    <div class="body">2-content</div>
    <div class="item active">3</div>
    <div class="body active">3-content</div>
    <div class="item">4</div>
    <div class="body">4-content</div>
    <div class="item">5</div>
    <div class="body">5-content</div>
    <div class="item">6</div>
    <div class="body">6-content</div>
  </div>
</div>
<script>
var head = document.querySelectorAll('.item')
var body = document.querySelectorAll('.body')
for (let i=0; i<head.length; i++) {
  head[i].onclick = function () {
    siblings(head[i], 'item')
    siblings(body[i], 'body')
    head[i].className = 'item active'
    body[i].className = 'body active'
  }
}

function siblings(el, _class){
  var b = el.parentNode.children
  for(var i = 0; i < b.length; i++){
      if (b[i].nodeType == 1 && b[i] != el && b[i].className.indexOf(_class) > -1){
        b[i].className = _class
      }
  }
}
</script>
<style>
.demo {
  width: 200px;
  height: 100%;
}
.demo .content .item {
  line-height: 20px;
  text-align: center;
  color: #fff;
  background: green;
  border-bottom: 1px #fff solid;
}
.demo .content .item.active {
  background: red;
}
.demo .content .body {
  display: none;
  height: 400px;
  width: 100%;
  text-align: center;
  border: 1px #ccc solid;
}
.demo .content .body.active {
  display: block;
}
</style>