javascript+div样式的自定义tab选项卡

最新推荐文章于 2023-12-18 14:14:50 发布

开着拖拉机的梦想家

最新推荐文章于 2023-12-18 14:14:50 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： jquery

本文链接：https://blog.youkuaiyun.com/wu920604/article/details/54094344

jquery 专栏收录该内容

44 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS及JavaScript实现的简单选项卡切换效果案例。通过鼠标悬停事件来展示不同内容面板，适用于初学者理解选项卡交互的基本原理。

需求：进入页面以div样式的选项卡显示，默认显示第一个，鼠标移上事件（也可以更换为鼠标点击事件）进行切换选项卡

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>
 <style type="text/css">
.news{ width:324px; margin-left:8px; border:1px solid #0973b2; padding:1px; height:269px; min-height:269px; background-color:#fff;}
.news_tit{ background:  url(../images/hd.gif) repeat-x; height:33px; line-height:33px;overflow:hidden;color:#FF0066; position:relative; font-size:14px; padding-left:10px; font-weight:bold;}
.none {display:none;}
.more{ font-size:12px; font-weight:normal;
	position:absolute;
	right:9px;
	top: 0px;
}
.tab2new div.active{  width:80px; height:34px; line-height:34px;  background-color:#d3e8ff; }
.tab2new div.active a{color:#0472bf;}
.tab2new div{ float: left;width:80px; text-align:center; height:26px; line-height:34px;}
.tab2new div a{color:#400040;}
.l{ float:left}
.r{ float:right}
.clear{ clear:both;}
 </style>
<script type="text/javascript">
<!--
	// JavaScript Document
function nTabs(thisObj,Num){
if(thisObj.className == "active")return;
var tabObj = thisObj.parentNode.id;

var tabList = document.getElementById(tabObj).getElementsByTagName("div");

for(i=0; i <tabList.length; i++)
{
  if (i == Num)
  {
   thisObj.className = "active"; 
      document.getElementById(tabObj+"_Content"+i).style.display = "block";
  }else{
   tabList[i].className = "normal"; 
   document.getElementById(tabObj+"_Content"+i).style.display = "none";
  }
} 
}
//-->
</script>
 <body>
      <!--news-->
    <div class="news l">
    <div class="news_tit">
            <ul id="myTab2" class="tab2new">
              <div class="active" onmouseover="nTabs(this,0);"> 
				<a target="_blank" href="#"><span>通知公告</span></a>
			  </div>
              <div class="normal" onmouseover="nTabs(this,1);">
				<a target="_blank" href="#"><span>中心动态</span></a>
			  </div>
			  <div class="normal" onmouseover="nTabs(this,2);">
				<a target="_blank" href="#"><span>要闻速递</span></a>
			  </div>
            </ul>
	</div>
     <!-- <div class="clear"></div> -->
             <!--通知公告-->
    <div id="myTab2_Content0">
      <ul class="list_1" style="height: 150px">
		  <div class="c1-body">
				<div class="" style="padding:3px 0px;">
					<div class="f-left" style="float:left;">   ·  
						<a href=""  target="_blank">111</a>  
					</div>
					<div class="clear"></div>
				</div>
		  </div>

		<div class="c1-body">
			<div class="" style="padding:3px 0px;">
				<div class="f-left" style="float:left;">   ·  
					<a href="#" title="通告" target="_blank">111</a>
				</div>
				<div class="clear"></div>
			</div>
		</div>
      </ul>
   </div>
<!--中心动态-->
   <div id="myTab2_Content1" class="none">
       <ul class="list_1" style="height: 150px">
	    <div class="c1-body">
			<div class="" style="padding:3px 0px;">
				<div class="f-left" style="float:left;">   · 
					<a href="#" title="2222" target="_blank">2222</a>
				</div>
			<div class="clear"></div>
		  </div>
		</div>
		 <div class="c1-body">
			<div class="" style="padding:3px 0px;">
				<div class="f-left" style="float:left;">   ·  
					<a href="#" target="_blank">222</a>
				</div>
			<div class="clear"></div>
		  </div>
		</div>
	</ul>
	</div>
<!-- 要闻速递 -->
	<div id="myTab2_Content2" class="none">
       <ul class="list_1" style="height: 150px">
	    <div class="c1-body">
			<div class="" style="padding:3px 0px;">
				<div class="f-left" style="float:left;">   · 
					<a href="#" title="3333" target="_blank">3333</a>
				</div>
			<div class="clear"></div>
		  </div>
		</div>
		 <div class="c1-body">
			<div class="" style="padding:3px 0px;">
				<div class="f-left" style="float:left;">   ·  
					<a href="#" target="_blank">3333</a>
				</div>
			<div class="clear"></div>
		  </div>
		</div>
	</ul>
	</div>
</div>
      <!--news end-->
 </body>
</html>