Tab切换

最新推荐文章于 2022-10-23 00:27:33 发布
qq_22317389
最新推荐文章于 2022-10-23 00:27:33 发布
阅读量201
点赞数 1
分类专栏： HTML5 文章标签： HTML5
本文链接：https://blog.youkuaiyun.com/qq_22317389/article/details/80349616
版权
HTML5 专栏收录该内容
29 篇文章
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        *{
            padding: 0%;
            margin: 0%;
        }

        body{
             background: #ECF0F1;
             color: #666;
             margin: 50px;
             font-family: "Helvetica Neue";
             
        }

        #tab-container{
            width: 400px;
            background: white;
            box-shadow: 1px 1px 2px rgba(0,0,0,.15);
        }

        #tab-nav{
            background: #1ABC9C;
            margin: 0%;
            padding: 0%;
        }

        #tab-nav li{
            height: 50px;
            width:100px;
            list-style: none;
            display: inline-block;
            line-height: 50px;
            text-align: center;
        }

        #tab-nav li a{
             
            text-decoration: none;
            color: white;
            /*将a标签的display设置为block，active类在加载的时候
            才可以将css样式直接添加到整个li块上，而不是只覆盖a标签*/
            display:block;
        }

        #tab-content{
            padding: 25px;
        }

        #tab-nav li a.active{
            color:#1ABC9C;
	        background:#FFF;
        }
    </style>
</head>
<body>
    <section id="tab-container">
        <ul id="tab-nav">
          <li><a href="#weather" id="nav-weather">Weather</a></li>
          <li><a href="#sport" id="nav-sport">Sport</a></li>
          <li><a href="#travel" id="nav-travel">Travel</a></li>
        </ul>
        <div id="tab-content">
          <article id="weather">
            <p>Weather is the state of the atmosphere, to the degree that it is hot or cold, wet or dry, calm or stormy, clear or cloudy. Weather, seen from an anthropological perspective, is something all humans in the world constantly experience through their senses, at least while being outside. There are socially and scientifically constructed understandings of what weather is, what makes it change, the effect it has on humans in different situations, etc. Therefore, weather is something people often communicate about.</p>
          </article>
          <article id="sport">
            <p>Sports are usually governed by a set of rules or customs, which serve to ensure fair competition, and allow consistent adjudication of the winner. Winning can be determined by physical events such as scoring goals or crossing a line first. It can also be determined by judges who are scoring elements of the sporting performance, including objective or subjective measures such as technical performance or artistic impression.</p>
          </article>
          <article id="travel">
            <p>Travel is the movement of people between relatively distant geographical locations, and can involve travel by foot, bicycle, automobile, train, boat, airplane, or other means, with or without luggage, and can be one way or round trip. Travel can also include relatively short stays between successive movements.</p>
          </article>
        </div>
        </section>

        <script type="text/javascript">
            var nav_weather = document.getElementById("nav-weather");
            var nav_sport = document.getElementById("nav-sport");
            var nav_travel = document.getElementById("nav-travel");
            var weather = document.getElementById("weather");
            var sport = document.getElementById("sport");
            var travel = document.getElementById("travel");

            //设置初始状态
            sport.style.display = 'none';
            travel.style.display = 'none';

            nav_weather.className = "active";

            

            nav_weather.onclick = function(e){
                hideAll();
                nav_weather.className = "active";
                weather.style.display = "block";
            };

            nav_sport.onclick = function(e){
                hideAll();
                nav_sport.className = "active";
                sport.style.display = "block";
            };

            nav_travel.onclick = function(e){
                hideAll();
                this.className = "active";
                travel.style.display = 'block';
            }

            function hideAll(){
                weather.style.display = "none";
                sport.style.display = "none";
                travel.style.display = "none";

                nav_weather.className = "";
                nav_sport.className = "";
                nav_travel.className = "";
                 
            }
        </script>
</body>
</html>