如何用CSS实现TAB菜单效果

2023-03-05 05:17:02html-css012

如何用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>

需要再加上JS进入控制。具体代码如下，JS的功能就是用来修改CSS中的display属性。下面的代码只是做一些简单的原理演示，你可以跟据你自己的需要进行修改。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>New Document </TITLE>

<style>

.tabnav ul{margin:0padding:0list-style:none}

.tabnav li{padding:5 10pxborder:1px solid redfloat:left}

.tabid {border:1px solid #000clear:both}

</style>

function tab(n){

var tabnav="tab"+n

var tabid="tabid"+n

cleardisplay()

document.getElementById(tabid).style.display="block"

}

function cleardisplay(){

for (i=1i<3i++)

{

var cleartabid="tabid"+i

document.getElementById(cleartabid).style.display="none"

}

</script>

</HEAD>

<BODY>

<div>

<ul>

</ul>

</div>

</div>

</BODY>

</HTML>

一开始我也以为纯用css做点击是做不到，搜了下资料，看到了一个demo，主要逻辑就是通过锚点进行定位，在指定区域显示不同的模块。

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

<head>

<title>纯CSS实现tab选项卡</title>

<style>

body,div,ul,li{margin:0 padding:0 font-size:12px}

.clearFloat{ clear:both height:0 line-height:0 font-size:0}

.tab_ul{ margin:10px auto 0 padding-left:20px width:228px height:31px background:url(/uploads/allimg/100309/1_100309143554_1.gif) left bottom repeat-x #FCEDFFborder:1px solid #DBA4E8 border-bottom:0}

.tab_ul li{ float:left display:inline margin:5px 0 0 5px width:46px height:26px}

.tab_ul li a{ display:blockwidth:46px height:26px line-height:26px text-align:centerfont-size:12px color:#000000 text-decoration:none}

.tab_ul li a:hover{ background-image:url(/uploads/allimg/100309/1_100309143512_1.gif) color:#5F0082 font-weight:bold}

.tabDiv{ margin:0 auto width:248px height:200pxborder:1px solid #DBA4E8 border-top:0 overflow:hidden}

.tabDiv ul{ margin:0 auto 0 padding-top:10px width:218px height:190px}

.tabDiv ul li{ height:24px text-align:right color:#666666 font-size:12px}

.tabDiv ul li a{ float:left color:#333333}

</style>

</head>

<body>

</ul>