js选项卡

dream2moon

已于 2022-02-18 15:23:28 修改

阅读量618

点赞数

文章标签： javascript css css3

于 2022-02-17 17:24:55 首次发布

本文链接：https://blog.csdn.net/qq_47959958/article/details/122987944

版权

老板给安排的任务，其实我到现在也不知道怎么描述，然后就搜了半天，终于知道它的学术用语——js选项卡。
下面我尽量描述一下，方便后人检索。
简而言之就是页面的一部分进行跳转，另外一部分保持不动。

https://c.runoob.com/codedemo/3159/

html

<p>点击各个选项卡查看内容:</p>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

body {font-family: "Lato", sans-serif;}

/* Style the tab */
div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

JavaScript

function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

当时刷LeetCode的时候就有好多人用JavaScript，我还在想前端语言怎么还能写算法，现在看来属实牛xxx。

另一种选项卡的方式，从网上找的，最终也是按照这个解决了问题，找不到原地址了，侵删。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}
</style>
</head>

<body>

<div class="wrap">
  <ul id="tab_t">
    <li class="act">选择1</li>
    <li>选择2</li>
    <li>选择3</li>
    <li>选择4</li>
  </ul>
  <div id="tab_c">
    <div>内容1</div>
    <div class="hide">内容2</div>
    <div class="hide">内容3</div>
    <div class="hide">内容4</div>
  </div>
</div>  
  
</body>

<script type="text/javascript">
    window.onload=function tab(tab_t,tab_t_tag,tab_c,tag_c_tag,evt){
        var tab_t=document.getElementById('tab_t');
        var tab_t_li=tab_t.getElementsByTagName('li');
        var tab_c=document.getElementById('tab_c');
        var tab_c_li=tab_c.getElementsByTagName('div');
        var len=tab_t_li.length;
        var i=0;
        for(i=0;i<len;i++){
            tab_t_li[i].index=i;
            tab_t_li[i].onclick=function(){
                for(i=0;i<len;i++){
                    tab_t_li[i].className='';
                    tab_c_li[i].className='hide';
                }
                tab_t_li[this.index].className='act';
                tab_c_li[this.index].className='';
            }
        }
    }
    // tab("tab_t","li","tab_c","div","onmouseover");
    </script>
</html>