新浪网站首页同款选项卡

选项卡效果

这是我自己模仿新浪网站首页中部的选项卡做的，大致的效果就是这样的

选项卡的布局和 javascript 控制

下面具体说明一下完成的过程，主要是阐述清楚用javascript实现它的原理：

1. 首先介绍一下它的html构成，选项卡的头部使用的ul套li的模式，每个被选选项下方内容的呈现都是用一个div做容器，至于内容div里面的东西就可以自己发挥，想呈现什么内容都可以。（我呈现的是像新浪网站首页一样下方三张图片加上一些信息列表）

2. 最核心的部分就是对选项卡的控制进行封装，完美的封装到只需要提供选项卡的容器的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);//将所有的选项卡添加效果
	
}
//封装的选项卡结束