Tab切换 —— 点击li标签,使其对应的div显示或隐藏

Tab切换 —— 点击li标签,使其对应的div显示或隐藏_第1张图片
tab效果图

实现代码


<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" />
    <title>TAB切换title>
<style>
*,body{margin: 0;padding: 0;}
html,body{font-family: "微软雅黑";width: 100%;height: 100%;font-size: 14px;overflow-x: hidden; -webkit-overflow-scrolling : touch;}
img {border: 0 none;width: 100%;height: auto;margin: auto;vertical-align: top;letter-spacing: 0;}
a{text-decoration: none;}
ul{list-style-type: none;}
span{display:inline-block;} 
main{height: 100%;}
#tab-name{position: fixed;top: 0;left: 0;z-index: 99;width: 100%;}
#tab-name ul{display: flex;justify-content: space-around;background-color: darkseagreen;color: #FFFFFF;text-align: center;height: 2.5em;line-height: 2.5em;}
#tab-name ul li{width: 33.3%;}
#tab-name ul .curent{color: seagreen;background-color: #FFFFFF;}
#tab-box{height: 100%;}
#tab-box section{height: 100%;padding: 3em 0; text-align: center;}
#tab-box section h1{margin:3em auto;}

style>
head>
<body>
    <main>
        <header id="tab-name">
            <ul>
                <li class="curent">第一天li>
                <li>第二天li>
                <li>第三天li>
            ul>
        header>
        <div id="tab-box">
            <section style="display: block;"><h1>星期一,天气晴h1>section>
            <section style="display: none;"><h1>星期二,天气阴h1>section>
            <section style="display: none;"><h1>星期三,天气雨h1>section>
        div>
    main>
    <script type="application/javascript">
        function TabBox(tabName,tabBox){
            var tabName = document.getElementById(tabName).getElementsByTagName("li");
            var tabBox = document.getElementById(tabBox).getElementsByTagName("section");
            function switchTab(i){
                tabName[i].οnmοuseοver=function(){
                    for(j=0; jif(i == j){     
                            tabName[j].className='curent';     
                            tabBox[j].style.display="block";
                        }else{     
                            tabName[j].className='';      
                            tabBox[j].style.display="none";   
                        }
                    }
                }
            }
            for( i=0; i"tab-name","tab-box")
        
    script>
body>
html>


你可能感兴趣的:(Tab切换 —— 点击li标签,使其对应的div显示或隐藏)