JS实现选项卡功能-阿里云开发者社区

JS实现选项卡功能

2023-11-16 23

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： JS实现选项卡功能

这里有3个按钮，点击哪个按钮出现哪个按钮的内容，再点的话内容的就取消了。这也是一个很好玩的一个小功能。

CSS：

<style>
      #text1{
        width: 200px;
        height: 200px;
        display: none;
        background-color: orangered;
      }
      #text2{
        width: 200px;
        height: 200px;
        display: none;
        background-color: hotpink;
      }
      #text3{
        width: 200px;
        height: 200px;
        display: none;
        background-color: blue;
      }
    </style>

HTML：

<div>
      <button id="button1" onclick="fun(1)">按钮1</button>
      <button id="button2" onclick="fun(2)">按钮2</button>
      <button id="button3" onclick="fun(3)">按钮3</button>
    </div>
    <div id="text1">按钮1内容</div>
    <div id="text2">按钮2内容</div>
    <div id="text3">按钮3内容</div>

JS：

<script>
      let on1 = document.getElementById("text1")
      let on2 = document.getElementById("text2")
      let on3 = document.getElementById("text3")
      function fun(cf) {
        if (cf == 1) {
          if (on2.style.display == "block" || on3.style.display == "block") {
            on2.style.display = "none"
            on3.style.display = "none"
          }
          if (on1.style.display == "block"){
            on1.style.display = "none"
          }else {
            on1.style.display = "block"
          }
        }
        if (cf == 2) {
        if (on1.style.display == "block" || on3.style.display == "block") {
          on1.style.display = "none"
          on3.style.display = "none"
          }
          if (on2.style.display == "block"){
            on2.style.display = "none"
          }else {
            on2.style.display = "block"
          }
        }
        if (cf == 3) {
          if (on1.style.display == "block" || on2.style.display == "block") {
            on1.style.display = "none"
            on2.style.display = "none"
          }
          if (on3.style.display == "block"){
            on3.style.display = "none"
          }else {
            on3.style.display = "block"
          }
        }
      }
    </script>

还有另一种通俗易懂的方式：

CSS:

<style>
      #text1{
        width: 200px;
        height: 200px;
        display: block;
        background-color: orangered;
      }
      #text2{
        width: 200px;
        height: 200px;
        display: none;
        background-color: hotpink;
      }
      #text3{
        width: 200px;
        height: 200px;
        display: none;
        background-color: blue;
      }
    </style>

HTML：

<div>
        <button id="button1" onclick="yi()">按钮1</button>
        <button id="button2" onclick="er()">按钮2</button>
        <button id="button3" onclick="san()">按钮3</button>
      </div>

JS:

let on1 = document.getElementById("text1")
        let on2 = document.getElementById("text2")
        let on3 = document.getElementById("text3")
        function yi() {
          on1.style.display = 'block'
          on2.style.display = 'none'
          on3.style.display = 'none'
        }
        function er() {
          on1.style.display = 'none'
          on3.style.display = 'none'
          on2.style.display = 'block'
        }
        function san() {
          on1.style.display = 'none'
          on2.style.display = 'none'
          on3.style.display = 'block'
        }

以上就是本次的选项卡的功能介绍了,有不足的地方请大家多多指点

JS实现选项卡功能

CSS：

HTML：

JS：

热门文章

最新文章

相关课程

相关电子书

相关实验场景