打印

一段非常好的滑动门[可感应触发或点击触发]兼容IE7 IE6 FireFox Opera

tdlisheng [楼主]

中级会员

帖子: 129
体力: 301
威望: 2
离线: 16 天

1^# 大中小发表于 2007-5-20 09:33

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>我的滑动门</title>
<style type="text/css">
body{
color: #000;
font-family: "宋体", arial;
font-size: 12px;
background: #fff;
text-align: center;
margin: 0;
}
.nTab{
float: left;
width: 960px;
margin: 0 auto;
border-bottom:1px #AACCEE solid;
background:#d5d5d5;
background-position:left;
background-repeat:repeat-y;
margin-bottom:2px;
}
.nTab .TabTitle{
clear: both;
height: 22px;
overflow: hidden;
}
.nTab .TabTitle ul{
border:0;
margin:0;
padding:0;
}
.nTab .TabTitle li{
float: left;
width: 70px;
cursor: pointer;
padding-top: 4px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 2px;
list-style-type: none;
}
.nTab .TabTitle .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;}
.nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;}
.nTab .TabContent{
width:auto;background:#fff;
margin: 0px auto;
padding:10px 0 0 0;
border-right:1px #AACCEE solid;border-left:1px #AACCEE solid;
}
.none {display:none;}
</style>
<script type="text/javascript">
function nTabs(thisObj,Num){
if(thisObj.className == "active")return;
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
  if (i == Num)
  {
   thisObj.className = "active"; 
      document.getElementById(tabObj+"_Content"+i).style.display = "block";
  }else{
   tabList[i].className = "normal"; 
   document.getElementById(tabObj+"_Content"+i).style.display = "none";
  }
} 
}
</script>
</head>
<body>
<br />
<br />
<div align="center" style="padding-left:25px;">

  <div class="nTab">
    
    <div class="TabTitle">
      <ul id="myTab0">
        <li class="active" onmouseover="nTabs(this,0);">全部</li>
        <li class="normal" onmouseover="nTabs(this,1);">日志</li>
        <li class="normal" onmouseover="nTabs(this,2);">咨询</li>
        <li class="normal" onmouseover="nTabs(this,3);">相册</li>
        <li class="normal" onmouseover="nTabs(this,4);">商城</li>
        <li class="normal" onmouseover="nTabs(this,5);">社区</li>
      </ul>
    </div>
    
    <div class="TabContent">
      <div id="myTab0_Content0"> 000 </div>
      <div id="myTab0_Content1" class="none">111</div>
      <div id="myTab0_Content2" class="none">222</div>
      <div id="myTab0_Content3" class="none">333</div>
      <div id="myTab0_Content4" class="none">444</div>
      <div id="myTab0_Content5" class="none">555</div>
    </div>
  </div>
  
  
  <div class="nTab" style=width:288px>
    
    <div class="TabTitle">
      <ul id="myTab1">
        <li class="active" onclick="nTabs(this,0);">aaa</li>
        <li class="normal" onclick="nTabs(this,1);">bbb</li>
        <li class="normal" onclick="nTabs(this,2);">ccc</li>
        <li class="normal" onclick="nTabs(this,3);">单击</li>
      </ul>
    </div>
    
    <div class="TabContent">
      <div id="myTab1_Content0"> 000 </div>
      <div id="myTab1_Content1" class="none"> 111 </div>
      <div id="myTab1_Content2" class="none"> 222 </div>
      <div id="myTab1_Content3" class="none"> 333 </div>
    </div>
  </div>
  
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

如果是感应触发.就选onmouseover
如果是点击触发.就选onclick [把它们两互相替换,就可随时变为感应或点击了]

而如果想在一个页面上有N个滑动门
就复制一套...将myTab0改成myTab1 myTab2 myTab3 等等等..都可以..或者换成你自己喜欢的名字...当然myTab0_Content0这个亦是要随着变动!

保留自己用

TOP

西部数码VPS主机1G内存仅266元

tdlisheng [楼主]

中级会员

帖子: 129
体力: 301
威望: 2
离线: 16 天

2^# 大中小发表于 2007-5-20 09:38

再发
无间断滚动的新闻文章列表，兼容IE、Firefox和Opera，符合W3C标准。可作Marqu

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>Fifty Studio│无间断滚动的新闻文章列表</title>
<link rel="stylesheet" type="text/css" href="/tutorials/demo/css/main.css" />

<style type="text/css">

</style>
<noscript>
<style type="text/css">
#demo{overflow:auto; }
}
</style>
</noscript>
</head>
<body>
<div id="ForestganWrap">
  <div id="forestganHeader"> <a href="/"><img src="/img/logo.gif" width="170" height="40" alt="Fifty Studio" class="logo" /></a>
    <h1>CSS 布局演示 CSS Layout by Forestgan</h1>
    <h2 id="demo_date">2006-11-1 发表</h2>
  </div>
  <div id="forestganMiddle"> <div id="FGWrapper">
<div id="demo">
<div id="demo1">
<ul>
    <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&amp;id=76" title="三列自适应宽度液态布局│Three Column Liquid Layouts">三列自适应宽度液态布局│Three Column Liquid Layouts </a></li>
    <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&amp;id=75" title="Internet Explorer 7 对CSS的兼容--Box Model Changes">Internet Explorer 7 对CSS的兼容--Box Model Changes </a></li>
    <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&amp;id=74" title="未知大小的图片在一个已知大小容器中的水平和垂直居中（二）">未知大小的图片在一个已知大小容器中的水平和垂直居中（二） </a></li>
    <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&amp;id=73" title="为不同的浏览器载入不同CSS的二种方法CSS Browser Selector">为不同的浏览器载入不同CSS的二种方法CSS Browser Selector </a></li>
    <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&amp;id=72" title="用ASP程序模拟实现first-child的功能">用ASP程序模拟实现first-child的功能 </a></li>
    <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&amp;id=71" title="本地检验网页是否符合标准的几种方法">本地检验网页是否符合标准的几种方法 </a></li>
    <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=6&amp;id=70" title="Accessibility和General Developer工具">Accessibility和General Developer工具 </a></li>
    <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&amp;id=69" title="未知总宽度的列表菜单水平居中的解决方案">未知总宽度的列表菜单水平居中的解决方案 </a></li>
    <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&amp;id=68" title="为机器人程序准备的robots.txt文件">为机器人程序准备的robots.txt文件 </a></li>
    <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&amp;id=67" title="未知大小图片在已知容器中的垂直和水平居中问题">未知大小图片在已知容器中的垂直和水平居中问题 </a></li>
</ul>
</div>
<div id="demo2">&nbsp;</div>
<script type="text/javascript">
	//图片无间断滚动代码，兼容IE、Firefox、Opera
	//原脚本是IE only，来自网上，作者未知
	//部分内容是由forestgan为了JS代码标准化，兼容以gecko为内核的浏览器于2006-10-30重写
	//http://www.forest53.com
	var speed=40;
	var FGDemo=document.getElementById('demo');
	var FGDemo1=document.getElementById('demo1');
	var FGDemo2=document.getElementById('demo2');
	FGDemo2.innerHTML=FGDemo1.innerHTML
	function Marquee1(){
	if(FGDemo2.offsetHeight-FGDemo.scrollTop<=0)
	FGDemo.scrollTop-=FGDemo1.offsetHeight
	else{
	FGDemo.scrollTop++
	}
	}
	var MyMar1=setInterval(Marquee1,speed)
	FGDemo.onmouseover=function() {clearInterval(MyMar1)}
	FGDemo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)}
</script> </div>
<div id="desc"><a href="http://www.forest53.com"><span id="copyright">Design by Forestgan</span></a>文章列表无间断滚动演示</div>
</div> </div>
</div>
<div id="forestganFooter">
  <address>
  演示页面设计制作： <a href="http://www.forest53.com">Forestgan</a> &nbsp;&nbsp;采用<a href="http://www.creativecommons.cn/">创作共用授权</a>--署名和非商业用途<br /><a href="javascript:history.back()">返回前一页</a>
  </address>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-152060-1";
urchinTracker();
</script>
<noscript>
<p>google-analytics</p>
</noscript>
<script src="/js/copyrightdemo.js" type="text/javascript"></script>
<noscript><p>my stat</p></noscript>
</body>
</html>

提示：您可以先修改部分代码再运行

TOP

广州周立功诚聘—平面/网页/UI/工业设计师 | 天业互联-酷睿租用599￥

tdlisheng [楼主]

中级会员

帖子: 129
体力: 301
威望: 2
离线: 16 天

3^# 大中小发表于 2007-5-20 09:53

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>标准布局应用：选项卡</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="PR" />
<script type="text/javascript">
</script>
<style type="text/css">
/* 选项卡关键属性 */
#tab { width:570px; height:260px; position:relative; } /*设置容器高宽等*/
html > body #tab { width:566px; }/*兼容IE6:IE6下宽度不够*/
#tab div { position:absolute; top:26px; left:0; width:564px; height:234px; border:solid #eee; border-width:0 1px 1px; }/*设置被操作容器高宽等*/
#tab div { display:none; }/*设置被操作容器默认隐藏:不用ID是因为下面将利用class来控制被操作容器显示,而class优先级低于id选择器*/
#tab .block { display:block; }/*选中的被操作容器*/
#tab h3 { float:left; width:114px; height:26px; line-height:26px; margin:0 -1px 0 0; font-size:14px; cursor:pointer; font-weight:normal; text-align:center; color:#00007F; background:#eee url(http://blog.pr1984.com/attachments/month_0612/720061212105226.gif) no-repeat; }/*默认标题样式*/
#tab .up { background:#fff url(http://blog.pr1984.com/attachments/month_0612/x20061212105231.gif) no-repeat; }/*选中的标题样式*/
/*修饰列表内容*/
#tab ul { margin:15px 0 0; list-style:none; padding:0; }
#tab li { float:left; width:50%; background:url(http://blog.pr1984.com/attachments/month_0612/a20061212105235.gif) no-repeat 25px 10px; }
#tab li a { display:block; width:84%; height:25px; line-height:25px; margin-left:8%; font-size:12px; text-decoration:none; color:#333; background:url(http://blog.pr1984.com/attachments/month_0612/g20061212105238.gif) repeat-x left bottom; text-indent:10px; }
#tab li a:hover { text-decoration:underline; color:#f00; }
</style>
</head>
<body>
<div id="tab">
	
	<h3 class="up" onclick="go_to(1);">选择一</h3>
	<div class="block">
	<ul>
	<li><a href="#">1张钰和于连的同源悲剧 </a></li>
	<li><a href="#">从人大代表侯建军终审 </a></li>
	<li><a href="#">车辆交付问题 </a></li>
	<li><a href="#">贻误申请执行期限损失 </a></li>
	<li><a href="#">民警特权扣车,油变成 </a></li>
	<li><a href="#">地下室及公摊面积不收 </a></li>
	<li><a href="#">当前医疗广告存在的问 </a></li>
	<li><a href="#">新医改要注意的几个问 </a></li>
	<li><a href="#">张钰和于连的同源悲剧 </a></li>
	<li><a href="#">从人大代表侯建军终审 </a></li>
	<li><a href="#">车辆交付问题 </a></li>
	<li><a href="#">贻误申请执行期限损失 </a></li>
	<li><a href="#">民警特权扣车,油变成 </a></li>
	<li><a href="#">地下室及公摊面积不收 </a></li>
	<li><a href="#">当前医疗广告存在的问 </a></li>
	<li><a href="#">新医改要注意的几个问 </a></li>
	</ul>
	</div>
	
	<h3 onclick="go_to(2);">选择二</h3>
	<div>
	<ul>
	<li><a href="#">2张钰和于连的同源悲剧 </a></li>
	<li><a href="#">从人大代表侯建军终审 </a></li>
	<li><a href="#">车辆交付问题 </a></li>
	<li><a href="#">贻误申请执行期限损失 </a></li>
	<li><a href="#">民警特权扣车,油变成 </a></li>
	<li><a href="#">地下室及公摊面积不收 </a></li>
	<li><a href="#">当前医疗广告存在的问 </a></li>
	<li><a href="#">新医改要注意的几个问 </a></li>
	<li><a href="#">张钰和于连的同源悲剧 </a></li>
	<li><a href="#">从人大代表侯建军终审 </a></li>
	<li><a href="#">车辆交付问题 </a></li>
	<li><a href="#">贻误申请执行期限损失 </a></li>
	<li><a href="#">民警特权扣车,油变成 </a></li>
	<li><a href="#">地下室及公摊面积不收 </a></li>
	<li><a href="#">当前医疗广告存在的问 </a></li>
	<li><a href="#">新医改要注意的几个问 </a></li>
	</ul>
	</div>
	
	<h3 onclick="go_to(3);">选择三</h3>
	<div>
	<ul>
	<li><a href="#">3张钰和于连的同源悲剧 </a></li>
	<li><a href="#">从人大代表侯建军终审 </a></li>
	<li><a href="#">车辆交付问题 </a></li>
	<li><a href="#">贻误申请执行期限损失 </a></li>
	<li><a href="#">民警特权扣车,油变成 </a></li>
	<li><a href="#">地下室及公摊面积不收 </a></li>
	<li><a href="#">当前医疗广告存在的问 </a></li>
	<li><a href="#">新医改要注意的几个问 </a></li>
	<li><a href="#">张钰和于连的同源悲剧 </a></li>
	<li><a href="#">从人大代表侯建军终审 </a></li>
	<li><a href="#">车辆交付问题 </a></li>
	<li><a href="#">贻误申请执行期限损失 </a></li>
	<li><a href="#">民警特权扣车,油变成 </a></li>
	<li><a href="#">地下室及公摊面积不收 </a></li>
	<li><a href="#">当前医疗广告存在的问 </a></li>
	<li><a href="#">新医改要注意的几个问 </a></li>
	</ul>
	</div>
	
	<h3 onclick="go_to(4);">选择四</h3>
	<div>
	<ul>
	<li><a href="#">4张钰和于连的同源悲剧 </a></li>
	<li><a href="#">从人大代表侯建军终审 </a></li>
	<li><a href="#">车辆交付问题 </a></li>
	<li><a href="#">贻误申请执行期限损失 </a></li>
	<li><a href="#">民警特权扣车,油变成 </a></li>
	<li><a href="#">地下室及公摊面积不收 </a></li>
	<li><a href="#">当前医疗广告存在的问 </a></li>
	<li><a href="#">新医改要注意的几个问 </a></li>
	<li><a href="#">张钰和于连的同源悲剧 </a></li>
	<li><a href="#">从人大代表侯建军终审 </a></li>
	<li><a href="#">车辆交付问题 </a></li>
	<li><a href="#">贻误申请执行期限损失 </a></li>
	<li><a href="#">民警特权扣车,油变成 </a></li>
	<li><a href="#">地下室及公摊面积不收 </a></li>
	<li><a href="#">当前医疗广告存在的问 </a></li>
	<li><a href="#">新医改要注意的几个问 </a></li>
	</ul>
	</div>
	
	<h3 onclick="go_to(5);">选择五</h3>
	<div>
	<ul>
	<li><a href="#">5张钰和于连的同源悲剧 </a></li>
	<li><a href="#">从人大代表侯建军终审 </a></li>
	<li><a href="#">车辆交付问题 </a></li>
	<li><a href="#">贻误申请执行期限损失 </a></li>
	<li><a href="#">民警特权扣车,油变成 </a></li>
	<li><a href="#">地下室及公摊面积不收 </a></li>
	<li><a href="#">当前医疗广告存在的问 </a></li>
	<li><a href="#">新医改要注意的几个问 </a></li>
	<li><a href="#">张钰和于连的同源悲剧 </a></li>
	<li><a href="#">从人大代表侯建军终审 </a></li>
	<li><a href="#">车辆交付问题 </a></li>
	<li><a href="#">贻误申请执行期限损失 </a></li>
	<li><a href="#">民警特权扣车,油变成 </a></li>
	<li><a href="#">地下室及公摊面积不收 </a></li>
	<li><a href="#">当前医疗广告存在的问 </a></li>
	<li><a href="#">新医改要注意的几个问 </a></li>
	</ul>
	</div>
	
	<script type="text/javascript">
	
	</script>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

再贴一个对比一下

TOP

认证您的手机，获得手机认证图标

，更多手机认证的好处

tdlisheng [楼主]

中级会员

帖子: 129
体力: 301
威望: 2
离线: 16 天

4^# 大中小发表于 2007-5-20 10:09

兼容IE和FireFox的间隔滚动代码

TOP

用CSS布局建站从零开始 | Photoshop中打造史诗般梦幻场景 | 05年第一次软件行业创业的惨痛教训

cwawaw

中级会员

帖子: 161
体力: 360
威望: 0
离线: 88 天

5^# 大中小发表于 2007-8-28 09:52

请问一个页面里面有多个滑动门那代码要怎么用啊！

TOP

webdesigning

风无双

金牌会员

帖子: 1972
体力: 3665
威望: 1
当前: 上海浦东
离线: 212 天

专长 前端制作,JS,项目管理

6^# 大中小发表于 2007-8-28 11:15

更正下...
应该是选项卡...

这里并未使用滑动门技术

www.5study.net www.websdeveloper.cn

TOP

rukey67

可也

中级会员

帖子: 380
体力: 399
威望: 2
当前: 广东广州
离线: 1 天

专长 前端制作,JS,PHP

7^# 大中小发表于 2007-11-2 22:59

请问无间断向下滚动怎么实现？
scrollTop为负值似乎无效

TOP

wangkaye

中级会员

认证
帖子: 155
体力: 288
威望: 0
当前: 上海闵行

8^# 大中小发表于 2007-11-22 15:36

引用:

原帖由 tdlisheng 于 2007-5-20 09:38 发表
再发
无间断滚动的新闻文章列表，兼容IE、Firefox和Opera，符合W3C标准。可作Marqu
...

非常好！谢谢楼主！

就是在 Fx 2.0.0.9 下看不到滚动新闻外面的那个框。IE6.0sp2 没有问题。

小马's Blog

TOP

chuji

初级会员

帖子: 27
体力: 69
威望: 0
离线: 122 天

9^# 大中小发表于 2007-11-23 15:21

换成utf-8格式后，怎么全乱了

TOP

52lamp

新手上路

帖子: 5
体力: 12
威望: 0
当前: 山西太原
离线: 11 天

10^# 大中小发表于 2007-12-2 21:53

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>我的滑动门</title>
<style type="text/css">
body{
color: #000;
font-family: "宋体", arial;
font-size: 12px;
background: #fff;
text-align: center;
margin: 0;
}
.nTab{
float: left;
width: 960px;
margin: 0 auto;
border-bottom:1px #AACCEE solid;
background:#d5d5d5;
background-position:left;
background-repeat:repeat-y;
margin-bottom:2px;
}
.nTab .TabTitle{
clear: both;
height: 22px;
overflow: hidden;
}
.nTab .TabTitle ul{
border:0;
margin:0;
padding:0;
}
.nTab .TabTitle li{
float: left;
width: 70px;
cursor: pointer;
padding-top: 4px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 2px;
list-style-type: none;
}
.nTab .TabTitle .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;}
.nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;}
.nTab .TabTitle .active_1{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;}
.nTab .TabTitle .normal_1{background:#B588E3;border:1px #AACCEE solid;}
.nTab .TabContent{
width:auto;background:#fff;
margin: 0px auto;
padding:10px 0 0 0;
border-right:1px #AACCEE solid;border-left:1px #AACCEE solid;
}
.none {display:none;}
</style>
<script type="text/javascript">
function nTabs(thisObj,Num){
if(thisObj.className == "active")return;
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
  if (i == Num)
  {
   thisObj.className = "active"; 
      document.getElementById(tabObj+"_Content"+i).style.display = "block";
  }else{
   tabList[i].className = "normal"; 
   document.getElementById(tabObj+"_Content"+i).style.display = "none";
  }
} 
}
</script>
</head>
<body>
<br />
<br />
<div align="center" style="padding-left:25px;">

  <div class="nTab">
    
    <div class="TabTitle">
      <ul id="myTab0">
        <li class="active" onmouseover="nTabs(this,0);">全部</li>
        <li class="normal" onmouseover="nTabs(this,1);">日志</li>
        <li class="normal" onmouseover="nTabs(this,2);">咨询</li>
        <li class="normal" onmouseover="nTabs(this,3);">相册</li>
        <li class="normal" onmouseover="nTabs(this,4);">商城</li>
        <li class="normal" onmouseover="nTabs(this,5);">社区</li>
      </ul>
    </div>
    
    <div class="TabContent">
      <div id="myTab0_Content0"> 000 </div>
      <div id="myTab0_Content1" class="none">111</div>
      <div id="myTab0_Content2" class="none">222</div>
      <div id="myTab0_Content3" class="none">333</div>
      <div id="myTab0_Content4" class="none">444</div>
      <div id="myTab0_Content5" class="none">555</div>
    </div>
  </div>
  
  
  <div class="nTab" style=width:288px>
    
    <div class="TabTitle">
      <ul id="myTab1">
        <li class="active_1" onclick="nTabs(this,0);">aaa</li>
        <li class="normal_1" onclick="nTabs(this,1);">bbb</li>
        <li class="normal_1" onclick="nTabs(this,2);">ccc</li>
        <li class="normal_1" onclick="nTabs(this,3);">单击</li>
      </ul>
    </div>
    
    <div class="TabContent">
      <div id="myTab1_Content0"> 000 </div>
      <div id="myTab1_Content1" class="none"> 111 </div>
      <div id="myTab1_Content2" class="none"> 222 </div>
      <div id="myTab1_Content3" class="none"> 333 </div>
    </div>
  </div>
  
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

我使用的时候，多个的时候。调整css后，为什么一点又回到第一个上了？

TOP

caiying2007

版主

帖子: 2982
体力: 5717
威望: 10
离线: 132 天

11^# 大中小发表于 2007-12-3 21:30

回复 #51 52lamp 的帖子

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>我的滑动门</title>
<style type="text/css">
body{
color: #000;
font-family: "宋体", arial;
font-size: 12px;
background: #fff;
text-align: center;
margin: 0;
}
.nTab{
float: left;
width: 960px;
margin: 0 auto;
border-bottom:1px #AACCEE solid;
background:#d5d5d5;
background-position:left;
background-repeat:repeat-y;
margin-bottom:2px;
}
.nTab .TabTitle{
clear: both;
height: 22px;
overflow: hidden;
}
.nTab .TabTitle ul,.nTab .TabTitle_1 ul{
border:0;
margin:0;
padding:0;
}
.nTab .TabTitle li,.nTab .TabTitle_1 li{
float: left;
width: 70px;
cursor: pointer;
padding-top: 4px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 2px;
list-style-type: none;
}
.nTab .TabTitle .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;}
.nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;}
.nTab .TabTitle_1 .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;}
.nTab .TabTitle_1 .normal{background:#B588E3;border:1px #AACCEE solid;}
.nTab .TabContent{
width:auto;background:#fff;
margin: 0px auto;
padding:10px 0 0 0;
border-right:1px #AACCEE solid;border-left:1px #AACCEE solid;
}
.none {display:none;}
</style>
<script type="text/javascript">
function nTabs(thisObj,Num){
if(thisObj.className == "active")return;
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
  if (i == Num)
  {
   thisObj.className = "active"; 
      document.getElementById(tabObj+"_Content"+i).style.display = "block";
  }else{
   tabList[i].className = "normal"; 
   document.getElementById(tabObj+"_Content"+i).style.display = "none";
  }
} 
}
</script>
</head>
<body>
<br />
<br />
<div align="center" style="padding-left:25px;">

  <div class="nTab">
    
    <div class="TabTitle">
      <ul id="myTab0">
        <li class="active" onmouseover="nTabs(this,0);">全部</li>
        <li class="normal" onmouseover="nTabs(this,1);">日志</li>
        <li class="normal" onmouseover="nTabs(this,2);">咨询</li>
        <li class="normal" onmouseover="nTabs(this,3);">相册</li>
        <li class="normal" onmouseover="nTabs(this,4);">商城</li>
        <li class="normal" onmouseover="nTabs(this,5);">社区</li>
      </ul>
    </div>
    
    <div class="TabContent">
      <div id="myTab0_Content0"> 000 </div>
      <div id="myTab0_Content1" class="none">111</div>
      <div id="myTab0_Content2" class="none">222</div>
      <div id="myTab0_Content3" class="none">333</div>
      <div id="myTab0_Content4" class="none">444</div>
      <div id="myTab0_Content5" class="none">555</div>
    </div>
  </div>
  
  
  <div class="nTab" style=width:288px>
    
    <div class="TabTitle_1">
      <ul id="myTab1">
        <li class="active" onclick="nTabs(this,0);">aaa</li>
        <li class="normal" onclick="nTabs(this,1);">bbb</li>
        <li class="normal" onclick="nTabs(this,2);">ccc</li>
        <li class="normal" onclick="nTabs(this,3);">单击</li>
      </ul>
    </div>
    
    <div class="TabContent">
      <div id="myTab1_Content0"> 000 </div>
      <div id="myTab1_Content1" class="none"> 111 </div>
      <div id="myTab1_Content2" class="none"> 222 </div>
      <div id="myTab1_Content3" class="none"> 333 </div>
    </div>
  </div>
  
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

TOP

niuzuo

蜡笔小菜

中级会员

帖子: 102
体力: 218
威望: 0
离线: 1 天

12^# 大中小发表于 2007-12-26 15:23

如果文字导航文字很多,超过背景114的宽度,但是背景是图片,宽度为50,怎么办?

TOP

lin516

中级会员

帖子: 106
体力: 271
威望: 0
当前: 福建福州
离线: 1 天

专长 JS,ASP,Access

13^# 大中小发表于 2008-6-7 14:09

延时200MS <li class="normal" onmouseover="setTimeout('nTabs(this,5)',200);">社区</li> 为什么不行啊

[ 本帖最后由 lin516 于 2008-6-7 14:20 编辑 ]

中国Asp之家

TOP

lanxun0

初级会员

帖子: 34
体力: 73
威望: 0
当前: 云南昆明
离线: 11 天

专长 网页设计,平面,ASP

14^# 大中小发表于 2008-6-7 14:47

楼主,你那个"无间断滚动的新闻文章列表"我用到我自己的页面中了,插入图片后,设置成全屏,滚动就会出现闪屏,是怎么回事,

TOP

dnaliang

金牌会员

帖子: 1448
体力: 3811
威望: 0
当前: 上海闸北
离线: 2 天

15^# 大中小发表于 2008-6-13 11:07

请问下,这个改成背景是图片怎么做? 我改了下图片,,,把 li 换成了 TD,,结果没效果了.郁闷

www.idc0001.cn
找些人帮忙。。。

TOP

icartrip

初级会员

帖子: 50
体力: 122
威望: 0
当前: 江苏南京
离线: 2 天

专长 市场,推广,媒介

16^# 大中小发表于 2009-4-18 15:05

那个滑动门代码怎么变成不同样子的

TOP

hisland

初级会员

帖子: 34
体力: 73
威望: 0
当前: 四川成都
离线: 2 天

专长 前端制作,JS,UE

17^# 大中小发表于 2009-4-21 16:04

又是滑动门..看来真的是被传变样了,,
6楼的正解,,,
应该是TAB选项卡,汗,今天咋就遇到这么我乱说的

www.hisland.cn

TOP

moondy

叶飞雪

高级会员

认证
帖子: 375
体力: 757
威望: 0
当前: 广东深圳
离线: 1 天

专长 前端制作,AS,SEO

18^# 大中小发表于 2009-4-21 17:28

感觉“滑动门”这个词被用得太乱了，只是因为滑动门常常是伴随着选项卡的效果，所以很多时候都被人混淆了。
楼主的这个只是选项卡。滑动门是指CSS中一种自适应伸缩的方法

http://www.moondyzone.com

TOP

flyski218

中级会员

认证
帖子: 339
体力: 348
威望: 0
当前: 湖北武汉
离线: 2 天

19^# 大中小发表于 2009-4-21 18:09

二楼的怎光可以往上滑，不能往下滑？

I AM WHO I AM

TOP

paopaoxiaoxin

泡泡小新

中级会员

帖子: 428
体力: 336
威望: 0
当前: 山东济南
离线: 3 天

专长 网页设计,UI,前端制作

20^# 大中小发表于 2009-4-21 19:19

很好~~~~~

张新

TOP