<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>Tab滑动门效果</title>
<style type="text/css">
<!--
*{
margin:0 auto;
padding:0;
}
body{
font:12px "宋体";
text-align:center;
}
a:link,a:visited{
color:#999;
text-decoration:none;
}
a:hover {
color: #666;
text-decoration:underline;
}
ul{
list-style:none;
}
li{
color:#999;
height:22px;
line-height:22px;
border-bottom:#eee 1px dashed;
}
.main{
clear:both;
padding:8px;
text-align:center;
}
/*TAB样式开始啰*/
#tabs1{
text-align:left;
width:400px;
position:relative;
}
.menu1box{
overflow:hidden;
height:26px;
width:400px;
text-align:left;
}
#menu1{
position:absolute;
top:0;
left:0;
z-index:1;
}
#menu1 li{
float:left;
display:block;
cursor:pointer;
width:80px;
text-align:center;
line-height:24px;
height:24px;
padding-top:2px;
border-bottom: none;
}
#menu1 li.hover{
background:#FFFFFF url(123/tab1.gif) no-repeat top center;
color: #0DA5E6;
font-weight:bold;
}
.main1box{
clear:both;
margin-top:-1px;
border-top:1px solid #E4E4E4;
height:181px;
width:400px;
}
#main1 ul{
display: none;
text-align:left;
}
#main1 ul.block{
display: block;
}
-->
</style>
<script>
<!--
/*更换显示样式*/
function setTab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("li");
var mli=document.getElementById("main"+m).getElementsByTagName("ul");
for(i=0;i<tli.length;i++){
tli[i].className=i==n?"hover":"";
mli[i].style.display=i==n?"block":"none";
}
}
//-->
</script>
</head>
<body>
<br />
<br />
<!--第二种形式-->
<div id="tabs1">
<div class="menu1box">
<ul id="menu1">
<li class="hover" onMouseOver="setTab(1,0)">网站建设</li>
<li onMouseOver="setTab(1,1)">网络营销</li>
<li onMouseOver="setTab(1,2)">客户类别</li>
</ul>
</div>
<div class="main1box">
<div class="main" id="main1">
<ul class="block">
<li><a href="###">网站的网络营销方案怎么写</a></li>
<li><a href="###">企业如何做好网站建设营销SEM </a></li>
<li><a href="###">网站SEO优化之百度搜索引擎</a></li>
</ul>
<ul>
<li><a href="###" title="网站推广之如何更好的把自己的">网站推广之如何更好的把自己的</a></li>
<li><a href="###">网站建设过程中网站标题的SEO</a></li>
<li><a href="###">搜索引擎SEO营销(SEM)的服务流程</a></li>
<li><a href="###">搜索引擎营销SEM的目的是什么</a></li>
<li><a href="###">商丘seo之百度近期可能要进行大</a></li>
<li><a href="######">网站SEO优化之一次增加很多外链</a></li>
<li><a href="###">网站SEO之如何增加百度的相关域</a></li>
</ul>
<ul>
<li><a href="###" title="煤球机">煤球机设备的修理方法</a></li>
<li><a href="###" title="商丘装修网">国内外煤球机的厂家是哪些</a></li>
<li><a href="###" title="全自动煤球机">煤球是如何做出来的</a></li>
<li><a href="###" title="商丘购物网">有没有最好的煤球机机器设备</a></li>
<li><a href="###" title="河南煤球机">国内常见的煤球机设备</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
滑动门效果-css+jQuery
2013年3月25日星期一 Asia/Shanghai上午9:43:39
Posted in magento扩展
By