新浪網站首頁同款頁籤

• 頁籤效果
• 頁籤的布局和 javascript 控制
• 頁籤的html,css,javascript源碼

頁籤效果

這是我自己模仿新浪網站首頁中部的頁籤做的，大緻的效果就是這樣的

頁籤的布局和 javascript 控制

下面具體說明一下完成的過程，主要是闡述清楚用

javascript

實作它的原理：

1. 首先介紹一下它的

   html

   構成，頁籤的頭部使用的

   ul

   套

   li

   的模式，每個被選選項下方内容的呈現都是用一個

   div

   做容器，至于内容

   div

   裡面的東西就可以自己發揮，想呈現什麼内容都可以。（我呈現的是像新浪網站首頁一樣下方三張圖檔加上一些資訊清單）

1. 最核心的部分就是對頁籤的控制進行封裝，完美的封裝到隻需要提供頁籤的容器的

   id

   ，我就可以實作頁籤選擇的效果！！！！！（當然的前提是頁籤的布局必須是上方的

   html

   的格式）

3.頁籤的樣式就很簡單了， 在後面會有源碼，供需要的參考。

頁籤的html,css,javascript源碼

html:

<div class="context_center_item">
			<!--上面的頁籤-->
			<div class="context_item context_center_top_item" id="context_center_top_item">
				<ul class="select_items select_center_top_items" id="select_center_top_items"> 
			        <li class="selected" id="nav1" ><a href="#">圖檔</a></li> 
			        <li class="unselected" id="nav2" ><a href="#">專欄</a></li> 
			        <li class="unselected" id="nav3" ><a href="#">熱點</a></li> 
	    		</ul> 
				<div class="select_context_info select_center_top_context_info">
					<div class="display_div" id="sub1">
						<div class="threePic">
							<a target="_blank" href="#" class="picture_a">
                                <img width="105" height="70" src="//n.sinaimg.cn/news/175/w105h70/20181109/-KPT-hnprhzw6683365.jpg">
								<span>美國酒吧槍擊現場</span>
							</a>
							<a target="_blank" href="#" class="picture_a">
                                <img width="105" height="70" src="https://n.sinaimg.cn/news/175/w105h70/20181109/y421-hnprhzw6647199.jpg">
								<span>她養錦鯉年入千萬</span>
							</a>
							<a target="_blank" href="#" class="picture_a">
                                <img width="105" height="70" src="https://n.sinaimg.cn/news/175/w105h70/20181109/-qXx-hnprhzw6617848.jpg">
								<span>全球政要一周趣圖</span>
							</a>
						</div>
						<ul>
							<li><a href="#" class="nowsLeftIcon">中國空軍盛裝亮相中國航展</a> <a href="#">哈爾濱現罕見超大日暈</a></li>
							<li><a href="#" class="nowsLeftIcon">女孩為父畫“抗癌日記”</a> <a href="#">女孩為父畫“抗癌日記”</a></li>
							<li><a href="#" class="nowsLeftIcon">高校開種田必修課</a> <a href="#">環衛工繡《清明上河圖》賣25萬</a></li>
							<li><a href="#" class="nowsLeftIcon">環衛工繡《清明上河圖》賣25萬</a> <a href="#">唐嫣毛衣柔美鑽戒耀眼</a></li>
						</ul>
					</div>	
					<div class="undisplay_div" id="sub2">
						<div class="threePic">
							<a target="_blank" href="#" class="picture_a">
                                <img width="105" height="70" src="https://n.sinaimg.cn/news/460/w756h504/20181112/49kj-hnstwwq8623161.jpg">
								<span>快遞小哥的雙十一 </span>
							</a>
							<a target="_blank" href="#" class="picture_a">
                                <img width="105" height="70" src="https://n.sinaimg.cn/news/787/w952h635/20181112/7HmX-hnstwwq8586427.jpg">
								<span>川普取消訪美軍墓 </span>
							</a>
							<a target="_blank" href="#" class="picture_a">
                                <img width="105" height="70" src="https://n.sinaimg.cn/news/742/w445h297/20181112/R92G-hnstwwq8598142.jpg">
								<span>重慶現"最牛搬家"</span>
							</a>
						</div>
						<ul>
							<li><a href="#" class="nowsLeftIcon">法國隆重紀念一戰結束百年</a> <a href="#">天貓雙11成交額2135億</a></li>
							<li><a href="#" class="nowsLeftIcon">2018年中國航展閉幕</a> <a href="#">巴西發生山體滑坡山石砸民房</a></li>
							<li><a href="#" class="nowsLeftIcon">高校開種田必修課</a> <a href="#">環衛工繡《清明上河圖》賣25萬</a></li>
							<li><a href="#" class="nowsLeftIcon">百人參加發呆大賽各顯神通</a> <a href="#">埃及發現七座法老墓葬</a></li>
						</ul>
					</div>
					<div class="undisplay_div" id="sub3">
						<div class="threePic">
							<a target="_blank" href="#" class="picture_a">
                                <img width="105" height="70" src="https://n.sinaimg.cn/www/175/w105h70/20181109/2-bo-hnprhzw9326385.jpg">
								<span>足尖上的藝術品 </span>
							</a>
							<a target="_blank" href="#" class="picture_a">
                                <img width="105" height="70" src="https://n.sinaimg.cn/www/175/w105h70/20181109/uQrX-hnprhzw9250310.jpg">
								<span>世界最美城堡 </span>
							</a>
							<a target="_blank" href="#" class="picture_a">
                                <img width="105" height="70" src="https://n.sinaimg.cn/www/175/w105h70/20181109/EtEe-hnprhzw9333130.jpg">
								<span>遍地生蚝無人吃</span>
							</a>
						</div>
						<ul>
							<li><a href="#" class="nowsLeftIcon">法國隆重紀念一戰結束百年</a> <a href="#">天貓雙11成交額2135億</a></li>
							<li><a href="#" class="nowsLeftIcon">2018年中國航展閉幕</a> <a href="#">巴西發生山體滑坡山石砸民房</a></li>
							<li><a href="#" class="nowsLeftIcon">高校開種田必修課</a> <a href="#">環衛工繡《清明上河圖》賣25萬</a></li>
							<li><a href="#" class="nowsLeftIcon">百人參加發呆大賽各顯神通</a> <a href="#">埃及發現七座法老墓葬</a></li>
						</ul>
					</div>
				</div>
			</div>
	</div>			
           

css:

/*所有頁籤統一設定開始*/
.context_items .context_item{
	width: 360px;
} 
.context_items .context_item .select_items{
	height: 34px;
	border: 1px solid #dbdee1;
    background: url(//i2.sinaimg.cn/dy/deco/2013/0321/bg1px.png) 0 -33px repeat-x;
}
.context_items .context_item .select_items li{
	display: inline-block;
	width: 64px;
	height: 35px;
	line-height: 35px;
}
.context_items .context_item .select_items li a{
	color: #000000;
	font-size: 16px;
	margin-left: 11px;
    font-family: "Microsoft YaHei","微軟雅黑","SimHei","黑體";
}
.context_items .context_item .select_items .selected{
	height: 33px;
    line-height: 29px;
	border-top: 3px solid #ff8400;
	border-right: 1px solid #dbdee1;
    background-color: #fff;
}
.context_items .context_item .select_context_info .undisplay_div{
	display: none;
}
.context_items .context_item .select_context_info .threePic{
	display: flex;
	justify-content: space-between;
	margin: 10px 0px;
}
.context_items .context_item .select_context_info .threePic a{
	float: left;
    display: block;
    width: 105px;
    height: 90px;
    overflow: hidden;
    border: 1px solid #fff;
    position: relative;
    z-index: 0;
}
.context_items .context_item .select_context_info .threePic a:hover{
	border: 1px solid #FF8400;
}
.context_items .context_item .select_context_info .threePic a span {
    width: 105px;
    text-align: center;
    margin-top: -4px;
    color: #fff;
    height: 20px;
    line-height: 20px;
    display: block;
    background: #000;
}
.context_items .context_item .select_context_info li{
	padding-left: 10px;
    line-height: 26px;
    height: 26px;
    overflow: hidden;
    font-size: 14px;
    background: url(//i0.sinaimg.cn/home/main/index2013/0403/icon.png) no-repeat 0 -881px;
}
.context_items .context_item .select_context_info a{
	color: #122e67;
}
.context_items .context_item .select_context_info a:hover{
	color: #ff8400;
	text-decoration: underline;
}
.context_items .context_item .select_context_info li .nowsLeftIcon{
	background: url(//i1.sinaimg.cn/dy/main/icon/photoNewsLeft2.gif) no-repeat 0 center;
    padding-left: 23px;
}
/*所有頁籤統一設定結束*/
           

javascript:

//設定頁籤的顯隐效果
function set_selectCard_effect(father_content_id) {
	
	//拿到頁籤的ul
	let ul = document.getElementById(father_content_id).children[0];
	//擷取目前ul下是以的li
    let lis =  ul.getElementsByTagName("li");
    let length = lis.length;//擷取li的個數
    let li_id = lis[0].getAttribute("id");//擷取li的id
    let li_preId = li_id.substring(0,li_id.length - 1);//擷取li的字首id
   
   //擷取所有内容div的父類
   let div_all = document.getElementById(father_content_id).children[1];
   let div_id = div_all.getElementsByTagName("div")[0].getAttribute("id");//擷取li的id
   let div_preId = div_id.substring(0,div_id.length - 1);//擷取li的字首id
    
    
	//給所有的li标簽設定mouseover事件
    $("#"+father_content_id+" ul:first li").mouseover(function() {
			li_mouseover(this,length,li_preId,div_preId);
    }); 
}

//頁籤li的mouseover事件
function li_mouseover(e,length,li_preId,div_preId){ 
	
	//将目前頁籤設定為選中狀态
	 e.className="selected"; 
	 //擷取目前頁籤的id
	 let e_id = e.id; 
	 
	 //周遊是以的li标簽以及li下面對應的div
	 for(let i=1;i<=length;i++){ 
	 	
	   //拼接目前li标簽的id
	   let li_id =li_preId+i;
	   let li = document.getElementById(li_id); 
	   //拼接目前li标簽下的内容
	   let div_id =div_preId+i;
	   let div = document.getElementById(div_id);
	   
	   //如果目前li不是所選的li标簽，将目前li标簽置為未選中，并隐藏下面對應的内容。
	   if(li_id != e_id){ 
	     li.className="unselected"; 
	     div.style.display = "none"; 
	   	}else{ //否則顯示目前li标簽下面對應的内容
	       div.style.display = "block"; 
	   	} 
     } 
}

//将所有的頁籤添加效果
function set_all_selectCard_effect(id_arr){
	//周遊所有的需要添加效果的頁籤的id
	id_arr.forEach(function(val){
		//為該頁籤添加效果
		set_selectCard_effect(val);
	})
}

window.onload = function(){
	let selectCardIdArr = ['context_center_top_item','context_right_top_item'];//所有頁籤的id
	set_all_selectCard_effect(selectCardIdArr);//将所有的頁籤添加效果
	
}
//封裝的頁籤結束