简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Artikel  >  hujung hadapan web  >  JS+jQuery编写简单选项卡的示例

JS+jQuery编写简单选项卡的示例

黄舟
黄舟asal
2017-10-30 09:34:061345semak imbas

本文实例为大家分享了JS编写简单选项卡的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jquery选项卡</title>
  <style type="text/css">
  #p1 p{width: 200px;height: 200px;border: 1px red solid;display: none;}
  .active{background:#999;}
  </style>

  <!-- 原生的JS -->
  <script type="text/javascript">
  window.onload=function(){
    var op=document.getElementById(&#39;p1&#39;);
    var aInput=document.getElementsByTagName(&#39;input&#39;);
    var aCon=op.getElementsByTagName(&#39;p&#39;);

    for (var i = 0; i < aInput.length; i++) {

      aInput[i].index=i;

      aInput[i].onclick=function(){
        for (var i = 0; i < aInput.length; i++) {
          aInput[i].className=&#39;&#39;;
          aCon[i].style.display=&#39;&#39;;
        }

        this.className=&#39;active&#39;;
        aCon[this.index].style.display=&#39;block&#39;;
      }
    }
  }
  </script>


  <!-- jquery写法 -->
  <script type="text/javascript" src=&#39;../jquery-3.2.1.min.js&#39;></script>
  <script type="text/javascript">
  $(function(){
    $(&#39;#p1&#39;).find(&#39;input&#39;).click(function(){
      $(&#39;#p1&#39;).find(&#39;input&#39;).attr(&#39;class&#39;,&#39;&#39;);
      $(&#39;#p1&#39;).find(&#39;p&#39;).css(&#39;display&#39;,&#39;none&#39;);
      $(this).attr(&#39;class&#39;,&#39;active&#39;);
      $(&#39;#p1&#39;).find(&#39;p&#39;).eq($(this).index()).css(&#39;display&#39;,&#39;block&#39;);
    })
  })
  </script>
</head>
<body>
  <p id="p1">
    <input class="active" type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
    <p style="display: block;">11111</p>
    <p>22222</p>
    <p>33333</p>
  </p>
</body>
</html>

Atas ialah kandungan terperinci JS+jQuery编写简单选项卡的示例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JavaScript中关于按钮禁用与启用的效果实例Artikel seterusnya：Vue.js划分组件的实现方法介绍

Artikel berkaitan

Lihat lagi