Tab切换
<!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>

阅读更多
文章标签: HTML5
个人分类: HTML5
想对作者说点什么? 我来说一句

QQTab切换特效(源码)

2011年07月15日 413KB 下载

Android主流APP底部Tab效果制作

2017年09月01日 24.94MB 下载

jQuery+css实现tab切换效果

2018年01月09日 36KB 下载

网页原型tab切换

2013年04月27日 53KB 下载

MFC小程序文件空格和TAB切换

2011年05月05日 9.02MB 下载

没有更多推荐了,返回首页

不良信息举报

Tab切换

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭