如何用CSS实现TAB菜单效果

2023-04-05 06:37:02html-css025

如何用CSS实现TAB菜单效果,第1张

<!--

*{padding:0margin:0}

img{border:0display:block}

BODY {

PADDING-RIGHT: 0pxPADDING-LEFT: 0pxFONT-SIZE: 12pxPADDING-BOTTOM: 0pxMARGIN: 0px autoCOLOR: blackLINE-HEIGHT: 150%PADDING-TOP: 10pxBACKGROUND-COLOR: whiteTEXT-ALIGN: center

}

.dis {

DISPLAY: block

}

.undis {

DISPLAY: none

}

#cntR {

WIDTH: 302px

}

#NewsTop {

CLEAR: bothMARGIN-BOTTOM: 16px

}

#NewsTop P {

FLOAT: leftLINE-HEIGHT: 21px

}

#NewsTop P.topTit {

FONT-WEIGHT: boldWIDTH: 117px

}

#NewsTop P.topC0 {

BACKGROUND: #dcdcdcBORDER-LEFT: #f2f2f2 1px solidWIDTH: 40pxCURSOR: pointer

}

#NewsTop P.topC1 {

BACKGROUND: #c2130eBORDER-LEFT: #f2f2f2 1px solidWIDTH: 40pxCOLOR: #fff

}

#NewsTop #NewsTop_tit {

BORDER-BOTTOM: #c2130e 3px solidHEIGHT: 21px

}

#NewsTop #NewsTop_cnt {

PADDING-LEFT: 32pxBACKGROUND: url(http://www.popuni.com/attachments/month_0703/o2007320133249.gif) no-repeat 12px 13pxLINE-HEIGHT: 26pxPADDING-TOP: 7pxHEIGHT: 260pxTEXT-ALIGN: left

}

#NewsTop #NewsTop_cnt A {

COLOR: #666TEXT-DECORATION: none

}

#NewsTop #NewsTop_cnt A:hover {

COLOR: #c2130eTEXT-DECORATION: underline

}

-->

</style>

</DIV>

<SPAN>

<A href="#" target=_self>新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A><BR>

</SPAN>

<SPAN>

<A href="#" target=_self>美华裔女兵在营房上吊死亡军方介入调查(图)</A><BR>

</SPAN>

<SPAN>

<A href="#" target=_self>最高法:承诺不判赖昌星死刑没有超越法律程序</A><BR>

</SPAN>

<SPAN>

<A href="#" target=_self>铁道部回应吴敬琏质疑:春运不涨价将长期坚持</A><BR>

</SPAN>

</DIV>

var Tags=document.getElementById('NewsTop_tit').getElementsByTagName('p')

var TagsCnt=document.getElementById('NewsTop_cnt').getElementsByTagName('span')

var len=Tags.length

var flag=1//修改默认值

for(i=1i<leni++){

Tags[i].value = i

Tags[i].onmouseover=function(){changeNav(this.value)}

TagsCnt[i].className='undis'

}

Tags[flag].className='topC1'

TagsCnt[flag].className='dis'

function changeNav(v){

Tags[flag].className='topC0'

TagsCnt[flag].className='undis'

flag=v

Tags[v].className='topC1'

TagsCnt[v].className='dis'

}

</SCRIPT>

</DIV>

tab 是在css当中一个自定义的类。通常定义在网页的<style></style>之间。比如：

<head>

.tab { font-size:12ptcolor:#00ff00}

</style>

这个前面带有 . 的 tab 就是一个css 类。引用的时候就得这样：

<div class="tab">这里面的内容就会应用 .tab 类</div>。当然也可以

<span class="tab">这也是一样的效果。</span>

就是任何的标签都可以引用这个 .tab 类。

如果定义不在本网页中的话，那就是使用了外部链接。就是说有一个外部的css文件。那样在使用的时候就这样：<link rel="stylesheet" type="text/css" href="abc.css">(放在<head></head>之间）。引用的时候还是用class="tab"。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<!--

function setTab(name,cursel,n){

for(i=1i<=ni++){

var menu=document.getElementById(name+i)/* two1 */

var con=document.getElementById("con_"+name+"_"+i)/* con_two_1 */

menu.className=i==cursel?"hover":""/*三目运算等号优先*/

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

}

//-->

</script>

.city_ser_show{display:nonewidth:490pxheight:200pxborder:1px solid #CCCCCC}

#con_two_1{display:block}

#menubox{width:500pxheight:24pxmargin-bottom:7px}

#menubox ul{margin:0padding:0}

#menubox ul li{float:leftlist-style:nonedisplay:inlinepadding-top:7pxborder:1px solid #D1D1D1border-bottom:0pxmargin:0 10pxwhite-space:nowraptext-overflow:ellipsiscursor:pointerwidth:60pxheight:24pxtext-align:centerfont-size:14pxoverflow:visible}

#menubox ul li.hover{border-top:2px solid #D1D1D1border-right:2px solid #D1D1D1border-left:2px solid #D1D1D1color: #000000font-weight:boldborder-bottom:0px solid #D1D1D1}

</style>

</head>

<body>

<!--

<ul>

</ul>

-->

<ul>

</ul>

</div>