用户注册



邮箱：

密码：

用户登录


邮箱：

密码：
记住登录一个月忘记密码？

发表随想


还能输入：200字
云代码 - css代码库

兼容所有主流浏览器（IE6,7,8，谷歌，火狐等）的滑动门代码

2012-10-19 作者： cssking举报

[css]代码库

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>兼容所有主流浏览器（IE6,7,8，谷歌，火狐等）的滑动门代码</title>
<script language="javascript">
function tabChange(obj,id)
{
 var arrayli = obj.parentNode.getElementsByTagName("li"); //获取li数组
 var arrayul = document.getElementById(id).getElementsByTagName("ul"); //获取ul数组
 for(i=0;i<arrayul.length;i++)
 {
  if(obj==arrayli[i])
  {
   arrayli[i].className = "cli";
   arrayul[i].className = "";
  }
  else
  {
   arrayli[i].className = "";
   arrayul[i].className = "hidden";
  }
 }
}
</script>
<style type="text/css">
.tabbox {width:256px;height:158px;}
.tabmenu {width:256px;height:28px;}
.tabmenu ul {margin:0;padding:0;list-style-type: none;}
.tabmenu li { text-align:center; float:left; display:block; width:58px; height:27px; overflow:hidden; background-color: #D2E8F7; line-height:27px; display:inline; font-size:12px;}
.tabmenu .cli {text-align:center;float:left;display:block;width:58px;height:27px;overflow:hidden;background-color: #fff;line-height:27px;display:inline;font-size:12px; cursor:pointer;}
#tabcontent {width:256px;background-color:#fff;}
#tabcontent ul {margin:0;padding:5px;list-style-type: none;}
#tabcontent .hidden {display:none;}
</style>
</head>
<body>
 <div class="tabbox">
  <div class="tabmenu">
   <ul>
    <li onmouseover="tabChange(this,'tabcontent')" class="cli">栏目一</li>
    <li onmouseover="tabChange(this,'tabcontent')">栏目二</li>
    <li onmouseover="tabChange(this,'tabcontent')">栏目三</li>
   </ul>
  </div>
  <div id="tabcontent">
   <ul name="tabul">
    <li><a href="http://static.googleadsserving.cn/pagead/imgad?id=CICAgICQ0fHBJRD6ARj6ATIIbrEu8U9R6q4">请点击测试</a></li>
    <li><a href="http://static.googleadsserving.cn/pagead/imgad?id=CICAgICQ0fHBJRD6ARj6ATIIbrEu8U9R6q4">1111111111111111111111</a></li>
    <li><a href="http://static.googleadsserving.cn/pagead/imgad?id=CICAgICQ0fHBJRD6ARj6ATIIbrEu8U9R6q4">1111111111111111111111</a></li>
    <li><a href="http://static.googleadsserving.cn/pagead/imgad?id=CICAgICQ0fHBJRD6ARj6ATIIbrEu8U9R6q4">1111111111111111111111</a></li>
    <li><a href="http://static.googleadsserving.cn/pagead/imgad?id=CICAgICQ0fHBJRD6ARj6ATIIbrEu8U9R6q4">1111111111111111111111</a></li>
    <li><a href="http://static.googleadsserving.cn/pagead/imgad?id=CICAgICQ0fHBJRD6ARj6ATIIbrEu8U9R6q4">1111111111111111111111</a></li>
   </ul>
   <ul class="hidden">
    <li><a href="http://static.googleadsserving.cn/pagead/imgad?id=CICAgICQ0fHBJRD6ARj6ATIIbrEu8U9R6q4">请点击测试</a></li>
    <li><a href="http://static.googleadsserving.cn/pagead/imgad?id=CICAgICQ0fHBJRD6ARj6ATIIbrEu8U9R6q4">2222222222222222222222</a></li>
    <li><a href="http://static.googleadsserving.cn/pagead/imgad?id=CICAgICQ0fHBJRD6ARj6ATIIbrEu8U9R6q4">2222222222222222222222</a></li>
    <li><a href="http://static.googleadsserving.cn/pagead/imgad?id=CICAgICQ0fHBJRD6ARj6ATIIbrEu8U9R6q4">2222222222222222222222</a></li>
    <li><a href="http://static.googleadsserving.cn/pagead/imgad?id=CICAgICQ0fHBJRD6ARj6ATIIbrEu8U9R6q4">2222222222222222222222</a></li>
    <li><a href="http://static.googleadsserving.cn/pagead/imgad?id=CICAgICQ0fHBJRD6ARj6ATIIbrEu8U9R6q4">2222222222222222222222</a></li>
   </ul>
   <ul class="hidden">
    <li><a href="http://static.googleadsserving.cn/pagead/imgad?id=CICAgICQ0fHBJRD6ARj6ATIIbrEu8U9R6q4">请点击测试</a></li>
    <li><a href="http://static.googleadsserving.cn/pagead/imgad?id=CICAgICQ0fHBJRD6ARj6ATIIbrEu8U9R6q4">3333333333333333333333</a></li>
    <li><a href="http://static.googleadsserving.cn/pagead/imgad?id=CICAgICQ0fHBJRD6ARj6ATIIbrEu8U9R6q4">3333333333333333333333</a></li>
    <li><a href="http://static.googleadsserving.cn/pagead/imgad?id=CICAgICQ0fHBJRD6ARj6ATIIbrEu8U9R6q4">3333333333333333333333</a></li>
    <li><a href="http://static.googleadsserving.cn/pagead/imgad?id=CICAgICQ0fHBJRD6ARj6ATIIbrEu8U9R6q4">3333333333333333333333</a></li>
    <li><a href="http://static.googleadsserving.cn/pagead/imgad?id=CICAgICQ0fHBJRD6ARj6ATIIbrEu8U9R6q4">3333333333333333333333</a></li>
   </ul>
  </div>
 </div>
</body>
</html>

演示地址：http://www.sjooy.com/case/case6/

[代码运行效果截图]


兼容所有主流浏览器（IE6,7,8，谷歌，火狐等）的滑动门代码


网友评论    (发表评论)

共1 条评论 1/1页

发表评论：

评论须知：

  • 1、评论每次加2分，每天上限为30；
  • 2、请文明用语，共同创建干净的技术交流环境；
  • 3、若被发现提交非法信息，评论将会被删除，并且给予扣分处理，严重者给予封号处理；
  • 4、请勿发布广告信息或其他无关评论，否则将会删除评论并扣分，严重者给予封号处理。


扫码下载

加载中，请稍后...

输入口令后可复制整站源码

加载中，请稍后...