非常不错的css滑动门效果网页选项卡代码

好好好强大，可以试试。先看效果图——

< html >

< head >

< title > 简洁Tab </ title >

< style type ="text/css" > ...

<!--

body,div,ul,li{...}{

padding:0;

text-align:center;

}

body{...}{

font:12px "宋体";

text-align:center;

}

a:link{...}{

color:#00F;

text-decoration:none;

}

a:visited {...}{

color: #00F;

text-decoration:none;

}

a:hover {...}{

color: #c00;

text-decoration:underline;

}

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.hxcgw.com/bbs/upfile/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.hxcgw.com/bbs/upfile/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 >

< br >< br >

< div id ="Tab1" >

< div class ="Menubox" >

< ul >

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

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

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

< li id ="one4" onmouseover ="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 >

< br >

< div id ="Tab2" >

< div class ="Menubox" >

< ul >

< li id ="two1" onmouseover ="setTab('two',1,4)" class ="hover" > 新闻1 </ li >

< li id ="two2" onmouseover ="setTab('two',2,4)" > 新闻2 </ li >

< li id ="two3" onmouseover ="setTab('two',3,4)" > 新闻3 </ li >

< li id ="two4" onmouseover ="setTab('two',4,4)" > 新闻4 </ li >

</ ul >

</ div >

< div class ="Contentbox" >

< div id ="con_two_1" > 新闻列表1 </ div >

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

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

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

</ div >

</ body >

</ html >

<head>
<title>简洁Tab</title>
<style type="text/css">

</style>
<script>

</script>
</head>
<body>
<br><br>
<div id="Tab1">
<div class="Menubox">
<ul>
   <li id="one1" οnmοuseοver="setTab('one',1,4)" class="hover">新闻1</li>
   <li id="one2" οnmοuseοver="setTab('one',2,4)" >新闻2</li>
   <li id="one3" οnmοuseοver="setTab('one',3,4)">新闻3</li>
   <li id="one4" οnmοuseοver="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>
<br>
<div id="Tab2">
<div class="Menubox">
<ul>
   <li id="two1" οnmοuseοver="setTab('two',1,4)" class="hover">新闻1</li>
   <li id="two2" οnmοuseοver="setTab('two',2,4)" >新闻2</li>
   <li id="two3" οnmοuseοver="setTab('two',3,4)">新闻3</li>
   <li id="two4" οnmοuseοver="setTab('two',4,4)">新闻4</li>
</ul>
</div>
<div class="Contentbox">
   <div id="con_two_1" >新闻列表1</div>
   <div id="con_two_2" style="display:none">新闻列表2</div>
   <div id="con_two_3" style="display:none">新闻列表3</div>
   <div id="con_two_4" style="display:none">新闻列表4</div>
</div>
</div>
</body>
</html>

非常不错的css滑动门效果网页选项卡代码相关推荐

很不错的JS+CSS滑动门_网页代码站(www.webdm.cn)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
css滑动门效果，文字两侧背景花纹自适应
css滑动门效果:不同长度的文字,两侧的背景图案一致,如下图所示. 效果预览: 素材图片:t2.jpg 源代码如下: <!DOCTYPE html> <html lang=" ...
很不错的JS+CSS滑动门
代码简介: 绝对值得一看的CSS滑动门,因为它在鼠标放上后自动弹出一个带阴影的层,无操作的情况下层会自动隐藏,这样更节省网页布局,而且它的风格也很清新,淘宝网有这种效果,没有用到任何修饰图片,绝对不容 ...
滑动门套滑动门css,JS+CSS实现带小三角指引的滑动门效果
本文实例讲述了JS+CSS实现带小三角指引的滑动门效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS带小三角指引的滑动门,有朋友说在IE6下看不到效果,其实能看到,因为那个小三角颜色比较淡, ...
html css纵向滑动列表,JS实现的简洁纵向滑动菜单(滑动门)效果
本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果.分享给大家供大家参考,具体如下: 这是一款纵向布局的CSS+JavaScript滑动门代码,相当简洁的手法来实现,如果对颜色不满意,你可以试着自 ...
php多重滑动门,CSS如何实现滑动门效果
CSS实现滑动门效果主要通过设置伪元素的样式来实现,在鼠标滑过时给元素设置display:block让它显示,鼠标滑出时隐藏一个网站的导航栏对于网站来说有着举足轻重的地位,导航栏的风格也是各式各样的 ...
原生JavaScript实现滑动门效果
一.什么是滑动门首先你要了解什么是滑动门. 生活中我们经常看到一些网站或是商城有一些滑动门的效果, 那么怎么实现一个简单的滑动门的网页特效呢?下面简单分享一下方法, 二.实现滑动门所需技术简单的H ...
很棒带阴影的JS+CSS滑动门菜单代码
代码简介: 绝对值得一看的CSS滑动门,因为它在鼠标放上后自动弹出一个带阴影的层,无操作的情况下层会自动隐藏,这样更节省网页布局,而且它的风格也很清新,淘宝网有这种效果,没有用到任何修饰图片,绝对不容 ...
css滑动门技术的应用,css 滑动门技术的介绍及实例分享
css 滑动门技术的介绍及实例分享发布时间:2009-10-15 12:48:01 作者:佚名我要评论可以这样说css滑动门技术是被刺激出来的,因为很多人认为css并不能做出漂亮的网页, ...

非常不错的css滑动门效果网页选项卡代码

非常不错的css滑动门效果网页选项卡代码相关推荐

最新文章

热门文章