JavaScript中选项卡的几种写法

╰+哭是因爲堅強的太久メ 2023-06-02 07:56 11阅读 0赞

## 效果图： ##

![1753638-20190903170303347-650094877.png][]

# #

## 1.基本写法 ##

<table style="width:660px;"> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div>
       &lt;!DOCTYPE html&gt; 
     </div> 
     <div>
       &lt;html lang="en"&gt; 
     </div> 
     <div>
       &lt;head&gt; 
     </div> 
     <div>
       &lt;meta charset="UTF-8"&gt; 
     </div> 
     <div>
       &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; 
     </div> 
     <div>
       &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt; 
     </div> 
     <div>
       &lt;title&gt;Document&lt;/title&gt; 
     </div> 
     <div>
       &lt;style&gt; 
     </div> 
     <div>
       ul li{ 
     </div> 
     <div>
       list-style: none; 
     </div> 
     <div>
       } 
     </div> 
     <div>
       ul{ 
     </div> 
     <div>
       width: 300px; 
     </div> 
     <div>
       height: 40px; 
     </div> 
     <div>
       background: #ccc; 
     </div> 
     <div>
       display: flex; 
     </div> 
     <div>
       justify-content: space-between; 
     </div> 
     <div>
       padding: 0; 
     </div> 
     <div>
       margin: 0; 
     </div> 
     <div>
       } 
     </div> 
     <div>
       li{ 
     </div> 
     <div>
       width: 33%; 
     </div> 
     <div>
       text-align: center; 
     </div> 
     <div>
       line-height: 40px; 
     </div> 
     <div>
       } 
     </div> 
     <div>
       li.active{ 
     </div> 
     <div>
       background: red; 
     </div> 
     <div>
       } 
     </div> 
     <div>
       .box{ 
     </div> 
     <div>
       width: 298px; 
     </div> 
     <div>
       height: 200px; 
     </div> 
     <div>
       border: 1px solid red; 
     </div> 
     <div>
       } 
     </div> 
     <div>
       .box p { 
     </div> 
     <div>
       height: 200px; 
     </div> 
     <div>
       display: none; 
     </div> 
     <div>
       margin: 0; 
     </div> 
     <div>
       } 
     </div> 
     <div>
       .box p.active{ 
     </div> 
     <div>
       display: block; 
     </div> 
     <div>
       } 
     </div> 
     <div>
       .box p:nth-child(1){ 
     </div> 
     <div>
       background: yellowgreen; 
     </div> 
     <div>
       } 
     </div> 
     <div>
       .box p:nth-child(2){ 
     </div> 
     <div>
       background: indianred; 
     </div> 
     <div>
       } 
     </div> 
     <div>
       .box p:nth-child(3){ 
     </div> 
     <div>
       background:mediumturquoise; 
     </div> 
     <div>
       } 
     </div> 
     <br> 
     <br> 
     <div>
       &lt;/style&gt; 
     </div> 
     <div>
       &lt;/head&gt; 
     </div> 
     <div>
       &lt;body&gt; 
     </div> 
     <div>
       &lt;div&gt; 
     </div> 
     <div>
       &lt;ul&gt; 
     </div> 
     <div>
       &lt;li class="active"&gt;1&lt;/li&gt; 
     </div> 
     <div>
       &lt;li&gt;2&lt;/li&gt; 
     </div> 
     <div>
       &lt;li&gt;3&lt;/li&gt; 
     </div> 
     <div>
       &lt;/ul&gt; 
     </div> 
     <div>
       &lt;div class="box"&gt; 
     </div> 
     <div>
       &lt;p class="active"&gt;1111111111111111111111111111111&lt;/p&gt; 
     </div> 
     <div>
       &lt;p&gt;2222222222222222222222222222222&lt;/p&gt; 
     </div> 
     <div>
       &lt;p&gt;3333333333333333333333333333333&lt;/p&gt; 
     </div> 
     <div>
       &lt;/div&gt; 
     </div> 
     <div>
       &lt;/div&gt; 
     </div> 
     <div>
       &lt;/body&gt; 
     </div> 
     <div>
       &lt;script&gt; 
     </div> 
     <div>
       var ol=document.querySelectorAll("li"); 
     </div> 
     <div>
       var op=document.querySelectorAll("p"); 
     </div> 
     <div>
       for(var i=0;i&lt;ol.length;i++){ 
     </div> 
     <div>
       ol[i].index=i; 
     </div> 
     <div>
       ol[i].οnclick=function(){ 
     </div> 
     <div>
       for(var j=0;j&lt;ol.length;j++){ 
     </div> 
     <div>
       ol[j].className=""; 
     </div> 
     <div>
       op[j].style.display="none"; 
     </div> 
     <br> 
     <div>
       } 
     </div> 
     <div>
       this.className="active"; 
     </div> 
     <div>
       op[this.index].style.display="block" 
     </div> 
     <div>
       } 
     </div> 
     <div>
       } 
     </div> 
     <br> 
     <br> 
     <div>
       &lt;/script&gt; 
     </div> 
     <div>
       &lt;/html&gt; 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

# #

## 2.面向对象 ##

<table style="width:447px;"> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div>
       &lt;!DOCTYPE html&gt; 
     </div> 
     <div>
       &lt;html lang="en"&gt; 
     </div> 
     <div>
       &lt;head&gt; 
     </div> 
     <div>
       &lt;meta charset="UTF-8"&gt; 
     </div> 
     <div>
       &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; 
     </div> 
     <div>
       &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt; 
     </div> 
     <div>
       &lt;title&gt;Document&lt;/title&gt; 
     </div> 
     <div>
       &lt;style&gt; 
     </div> 
     <div>
       ul li{ 
     </div> 
     <div>
       list-style: none; 
     </div> 
     <div>
       } 
     </div> 
     <div>
       ul{ 
     </div> 
     <div>
       width: 300px; 
     </div> 
     <div>
       height: 40px; 
     </div> 
     <div>
       background: #ccc; 
     </div> 
     <div>
       display: flex; 
     </div> 
     <div>
       justify-content: space-between; 
     </div> 
     <div>
       padding: 0; 
     </div> 
     <div>
       margin: 0; 
     </div> 
     <div>
       } 
     </div> 
     <div>
       li{ 
     </div> 
     <div>
       width: 33%; 
     </div> 
     <div>
       text-align: center; 
     </div> 
     <div>
       line-height: 40px; 
     </div> 
     <div>
       } 
     </div> 
     <div>
       li.active{ 
     </div> 
     <div>
       background: red; 
     </div> 
     <div>
       } 
     </div> 
     <div>
       .box{ 
     </div> 
     <div>
       width: 298px; 
     </div> 
     <div>
       height: 200px; 
     </div> 
     <div>
       border: 1px solid red; 
     </div> 
     <div>
       } 
     </div> 
     <div>
       .box p { 
     </div> 
     <div>
       height: 200px; 
     </div> 
     <div>
       display: none; 
     </div> 
     <div>
       margin: 0; 
     </div> 
     <div>
       } 
     </div> 
     <div>
       .box p.active{ 
     </div> 
     <div>
       display: block; 
     </div> 
     <div>
       } 
     </div> 
     <div>
       .box p:nth-child(1){ 
     </div> 
     <div>
       background: yellowgreen; 
     </div> 
     <div>
       } 
     </div> 
     <div>
       .box p:nth-child(2){ 
     </div> 
     <div>
       background: indianred; 
     </div> 
     <div>
       } 
     </div> 
     <div>
       .box p:nth-child(3){ 
     </div> 
     <div>
       background:mediumturquoise; 
     </div> 
     <div>
       } 
     </div> 
     <br> 
     <br> 
     <div>
       &lt;/style&gt; 
     </div> 
     <div>
       &lt;/head&gt; 
     </div> 
     <div>
       &lt;body&gt; 
     </div> 
     <div>
       &lt;div&gt; 
     </div> 
     <div>
       &lt;ul&gt; 
     </div> 
     <div>
       &lt;li class="active"&gt;1&lt;/li&gt; 
     </div> 
     <div>
       &lt;li&gt;2&lt;/li&gt; 
     </div> 
     <div>
       &lt;li&gt;3&lt;/li&gt; 
     </div> 
     <div>
       &lt;/ul&gt; 
     </div> 
     <div>
       &lt;div class="box"&gt; 
     </div> 
     <div>
       &lt;p class="active"&gt;1111111111111111111111111111111&lt;/p&gt; 
     </div> 
     <div>
       &lt;p&gt;2222222222222222222222222222222&lt;/p&gt; 
     </div> 
     <div>
       &lt;p&gt;3333333333333333333333333333333&lt;/p&gt; 
     </div> 
     <div>
       &lt;/div&gt; 
     </div> 
     <div>
       &lt;/div&gt; 
     </div> 
     <div>
       &lt;/body&gt; 
     </div> 
     <div>
       &lt;script&gt; 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <div> 
       <div> 
        <span style="color:#339966;font-size:14px;">//选项卡：点击对应按钮的时候，切换对应的内容</span> 
       </div> 
       <div> 
        <span style="color:#339966;font-size:14px;">// 1.选元素</span> 
       </div> 
       <div> 
        <span style="color:#339966;font-size:14px;">// 2.绑定事件</span> 
       </div> 
       <div> 
        <span style="color:#339966;font-size:14px;">// 3.找点击的元素的索引</span> 
       </div> 
       <div> 
        <span style="color:#339966;font-size:14px;">// 4.根据索引，显示内容</span> 
       </div> 
      </div> 
     </div> 
     <div>
       function Tab(){ 
     </div> 
     <div>
       this.li=document.querySelectorAll("li"); 
     </div> 
     <div>
       this.p=document.querySelectorAll("p"); 
     </div> 
     <div>
       this.init(); 
     </div> 
     <div>
       } 
     </div> 
     <div>
       Tab.prototype.init=function(){ 
     </div> 
     <div>
       var that=this; 
     </div> 
     <div>
       for(var i=0;i&lt;this.li.length;i++){ 
     </div> 
     <div>
       this.li[i].index=i; 
     </div> 
     <div>
       this.li[i].οnclick=function(){ 
     </div> 
     <div>
       that.abc=this.index; 
     </div> 
     <div>
       that.display(); 
     </div> 
     <div>
       } 
     </div> 
     <br> 
     <div>
       } 
     </div> 
     <div>
       } 
     </div> 
     <div>
       Tab.prototype.display=function(){ 
     </div> 
     <div>
       for(var i=0;i&lt;this.li.length;i++){ 
     </div> 
     <div>
       this.li[i].className=""; 
     </div> 
     <div>
       this.p[i].className=""; 
     </div> 
     <div>
       } 
     </div> 
     <div>
       this.li[this.abc].className="active"; 
     </div> 
     <div>
       this.p[this.abc].className="active"; 
     </div> 
     <br> 
     <div>
       } 
     </div> 
     <div>
       new Tab(); 
     </div> 
     <br> 
     <div>
       &lt;/script&gt; 
     </div> 
     <div>
       &lt;/html&gt; 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

# #

转载于:https://www.cnblogs.com/yu412/p/11454419.html

[1753638-20190903170303347-650094877.png]: /images/20230601/e867255bb85f4fc0899d6d97b57e1d06.png