html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab</title> <link rel="stylesheet" href="tab.css"> </head> <body> <div class="tab"> <div class="tab_header"> <a href="" class="tab_title text_lg">新闻排行</a> <a href="" class="tab_browse tab_item text_md">浏览</a> <a href="" class="tab_comment tab_item text_md">评论</a> </div> <div class="tab_main"> <div class="browse_main"> <ul class="para text_md"> <li><span>1</span><a href="">纳斯里旧爱获评2016百大尤物 曾怒骂法国队</a></li> <li><span>1</span><a href="">纳斯里旧爱获评2016百大尤物 曾怒骂法国队</a></li> <li><span>1</span><a href="">纳斯里旧爱获评2016百大尤物 曾怒骂法国队</a></li> <li><span>1</span><a href="">纳斯里旧爱获评2016百大尤物 曾怒骂法国队</a></li> <li><span>1</span><a href="">纳斯里旧爱获评2016百大尤物 曾怒骂法国队</a></li> <li><span>1</span><a href="">纳斯里旧爱获评2016百大尤物 曾怒骂法国队</a></li> <li><span>1</span><a href="">纳斯里旧爱获评2016百大尤物 曾怒骂法国队</a></li> <li><span>1</span><a href="">纳斯里旧爱获评2016百大尤物 曾怒骂法国队</a></li> <li><span>1</span><a href="">纳斯里旧爱获评2016百大尤物 曾怒骂法国队</a></li> <li><span>1</span><a href="">纳斯里旧爱获评2016百大尤物 曾怒骂法国队</a></li> </ul> </div> <div class="comment_main active"> <ul class="para text_md"> <li><span>2</span><a href="">每个人的记忆都是一座城市，这城市便是沙城。</a></li> <li><span>2</span><a href="">每个人的记忆都是一座城市，这城市便是沙城。</a></li> <li><span>2</span><a href="">每个人的记忆都是一座城市，这城市便是沙城。</a></li> <li><span>2</span><a href="">每个人的记忆都是一座城市，这城市便是沙城。</a></li> <li><span>2</span><a href="">每个人的记忆都是一座城市，这城市便是沙城。</a></li> <li><span>2</span><a href="">每个人的记忆都是一座城市，这城市便是沙城。</a></li> <li><span>2</span><a href="">每个人的记忆都是一座城市，这城市便是沙城。</a></li> <li><span>2</span><a href="">每个人的记忆都是一座城市，这城市便是沙城。</a></li> <li><span>2</span><a href="">每个人的记忆都是一座城市，这城市便是沙城。</a></li> <li><span>2</span><a href="">每个人的记忆都是一座城市，这城市便是沙城。</a></li> </ul> </div> </div> </div> <script src="tab.js"></script> </body> </html>
css
/*全局样式*/ *{ margin:0; padding:0; /*margin:0;和padding:0;一定要设置，否则问题会很多*/ list-style: none; text-decoration: none; } /*公共样式*/ /*我们将此页面中的字体分为两种类型，一种是偏大的，另一种是偏小的，在不同的文字处添加响应的class，这样有助于减少冗余代码，提高web性能*/ .text_lg{ font-size: 18px; } .text_md{ font-size: 12px; } /*基础样式*/ .tab{ width: 280px; background-color:#ccc; border:thin solid gray; /*注意：背景颜色就要写成background-color，而不写成background，否则有时可能会出现问题，且表示的也不清楚*/ } .tab_header{ /* 注意：这里不要使用width：400px；因为这样默认是400，但加了padding之后，width又会成为350px; 并且这里实际上默认是width:100%;这句话写出来也是多余的。这是一个技巧 */ padding-left: 10px; height: 40px; line-height: 40px; /*一旦出现height，就要考虑line-height的使用与否，主要是行内元素的居中问题。*/ /*注意：这里虽然设置了padding，tab_header的宽度也不会超出父元素的宽度*/ background-color: #eee; // font-size: 0; /*注意：因为在class为tab_header的div中的a为内联元素，所以为了消除内联元素之间的空格，我们设置位font-size:0*/ } .tab_title{ color:red; } .tab_item{ float: right; display: block; width: 16%; /*这里的width是相对于父元素的width，height没有设置，说明height是auto的，这里的height是和父元素同高的*/ text-align: center; } .tab_item:hover{ background-color: white; } .tab_main{ padding:8px; /*注意：这里的width没有设置，因为这样其宽度就是父元素的宽度，相当于width:100%; 而padding:8px;是从大局着眼，这样更好布置，可以减少很多冗余的代码。只是其width变的窄了，但布局没有乱*/ background-color: #eee; } .para li{ height: 18px; line-height: 18px; /*一般对于文字而言，我们都希望通过这种方式来居中*/ } .para a{ width: 88%; display: inline-block; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; /*注意：要使用这种当超过一定宽度时打省略号的情况，一定要具备五个要素--- 1：必须是inline-block或block；2：必须有确定的宽度；3.使用text-overflow:ellipsis; 4.配合使用overflow:hidden；5.配合使用white-space:nowrap; */ vertical-align: bottom; /*注意：这里必须加上vertical-align:bottom; 因为在同一行中的两个块级元素（inline-block）或者一个行内元素一个块级元素的组合， 一个使用了overflow:hidden,那么另一个元素就会塌陷，必须在有overflow属性的元素中再添加属性vertical-align:bottom;*/ } .para span:after{ content: ""; display: inline-block; /*默认为inline类型，所以我们可以设置为inline-block便可以再设置宽高*/ width: 10px; height: 1px; visibility: hidden; // display: none; /*注意：这里visibility：hidden表示元素被隐藏，但是位置还会占着； 如果设置位display:none;这样就不会有空格了，这便是display:none;和visibility：hidden的区别。*/ } .comment_main,.browse_main{ display: none; } .active{ display: block; background-color: white; }
js
window.onload=function(){ /*注意：因为我把tab.js在头部引入，所以这里一定要使用window.onload,否则不能正常使用；或者我们可以把tab.js在</body>前加载，这样也是可以行得通的*/ var browse = document.querySelector(".tab_browse"); var comment = document.querySelector(".tab_comment"); var browse_main = document.querySelector(".browse_main"); var comment_main = document.querySelector(".comment_main"); /*注意：假设这里有class为tab_browse的元素多个，但是使用querySelector选择器选择到的只是第一次元素; 如果我们希望得到很多元素，可以使用querySeletorAll()方法,它返回的是一个具有所有该class的数组*/ browse.onclick=function(){ browse_main.className="browse_main"+" active"; comment_main.className="comment_main" } comment.onclick=function(){ comment_main.className="comment_main"+" active" browse_main.className="browse_main"; } }
原文：http://www.cnblogs.com/zhuzhenwei918/p/6345513.html
