初级JS-DOM小案例

题目：

选项卡效果

HTML部分：

 <div class="btn">
      <button style="color: blue">综合</button>
      <button>娱乐</button>
      <button>新闻</button>
    </div>
    <div class="con">
      <div style="display: block">
        <p>综合1</p>
        <p>综合2</p>
        <p>综合3</p>
      </div>
      <div>
        <p>娱乐1</p>
        <p>娱乐2</p>
        <p>娱乐3</p>
      </div>
      <div>
        <p>新闻</p>
        <p>新闻1</p>
        <p>新闻3</p>
      </div>
    </div>

css部分：

 .con div {
        display: none;
      }

JS部分：

var btns = document.querySelectorAll(".btn button");
      btns.forEach(function (v, i) {
        v.onclick = function () {
          console.log("点击了按钮");
          //点击的按钮和点击的按钮的下标
          console.log(v, i);

          //   先全部都变黑
          btns.forEach(function (v2) {
            v2.style.color = "black";
          });
          //   点击的btn 变红
          v.style.color = "yellow";

          var divs = document.querySelectorAll(".con div");
          console.log(divs);

          var div = divs[i];
          console.log(div);

          divs.forEach(function (v3) {
            v3.style.display = "none";
          });

          div.style.display = "block";
        };
      });

运行结果：