记录一个简洁的html tab 标签
记录一个简洁的html tab 标签
谢锡鹏 发表于3年前
记录一个简洁的html tab 标签
  • 发表于 3年前
  • 阅读 57
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: 记录一个简洁的html tab 标签

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> 

<title>简洁Tab</title> 

<style type="text/css">  

 

ul{ list-style:none;} 

/*选项卡1*/ 

#Tab1{ 

width:460px; 

margin:0px; 

padding:0px; 

margin:0 auto;} 

/*选项卡2*/ 

#Tab2{ 

width:576px; 

margin:0px; 

padding:0px; 

margin:0 auto;} 

/*菜单class*/ 

.Menubox { 

width:100%; 

background:url(http://www.jb51.net/upload/small/20079299441652.gif); 

height:28px; 

line-height:28px; 

.Menubox ul{ 

margin:0px; 

padding:0px; 

.Menubox li{ 

float:left; 

display:block; 

cursor:pointer; 

width:114px; 

text-align:center; 

color:#949694; 

font-weight:bold; 

.Menubox li.hover{ 

padding:0px; 

background:#fff; 

width:116px; 

border-left:1px solid #A8C29F; 

border-top:1px solid #A8C29F; 

border-right:1px solid #A8C29F; 

background:url(http://www.jb51.net/upload/small/200792994426548.gif); 

color:#739242; 

font-weight:bold; 

height:27px; 

line-height:27px; 

.Contentbox{ 

clear:both; 

margin-top:0px; 

border:1px solid #A8C29F; 

border-top:none; 

height:181px; 

text-align:center; 

padding-top:8px; 

--> 

</style> 

<script> 

<!-- 

/*第一种形式 第二种形式 更换显示样式*/ 

function setTab(name,cursel,n){ 

for(i=1;i<=n;i++){ 

var menu=document.getElementById(name+i); 

var con=document.getElementById("con_"+name+"_"+i); 

menu.className=i==cursel?"hover":""; 

con.style.display=i==cursel?"block":"none"; 

//--> 

</script> 

</head> 

<body>



 

<div id="Tab1"> 

<div class="Menubox"> 

<ul> 

<li id="one1" onClick="setTab('one',1,4)" class="hover">新闻1</li> 

<li id="one2" onClick="setTab('one',2,4)" >新闻2</li> 

<li id="one3" onClick="setTab('one',3,4)">新闻3</li> 

<li id="one4" onClick="setTab('one',4,4)">新闻4</li> 

</ul> 

</div> 

<div class="Contentbox"> 

<div id="con_one_1" class="hover">新闻列表1</div> 

<div id="con_one_2" style="display:none">新闻列表2</div> 

<div id="con_one_3" style="display:none">新闻列表3</div> 

<div id="con_one_4" style="display:none">新闻列表4</div> 

</div> 

</div>

</body>


共有 人打赏支持
粉丝 2
博文 17
码字总数 12485
×
谢锡鹏
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: