求 tab 自动移动的代码

html-css016

求 tab 自动移动的代码,第1张

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

<html xmlns="http://www.w3.org/1999/xhtml&quot>

<head>

<meta http-equiv="Content-Type" content="text/html charset=gb2312" />

<title>选项卡</title>

<style type="text/css">

<!--

/* 初始化 */

body {

font: 12px/1 "宋体", SimSun, serif

background:#fff

color:#000

}

ul,

li,

dl,

dt,

dd {

margin:0

padding:0 /* 清除浏览器默认的margin和padding值 */

}

ul,

li {

list-style:none outside /* 清除浏览器中列表项默认的占位 */

}

a {

text-decoration:none

}

img {

border:0

}

/* 选项卡整体外观定义 */

.tabList {

width:400px

height:160px

overflow:hidden

}

.tabList .tabBox {

height:100%

position:relative

background:#09c

}

.tabList .tabBox li {

float:left

width:25%

text-align:center

}

.tabList h4 {

margin:0

height:26px

font-size:1em

line-height:22px

}

.tabList h4 a {

color:#039

font-weight:normal

display:block

background:#bfeafd url(http://www.22333.com/d/file/20090218/f27ae4b68b24dcf2e2ca0f22b3274fbb.png) no-repeat

padding-left:5px

}

.tabList h4 a span {

display:block

background:url(http://www.22333.com/d/file/20090218/f27ae4b68b24dcf2e2ca0f22b3274fbb.png) no-repeat top right

padding-right:5px

}

.tabList h4 a:hover,

.tabList .tabOn h4 a{

background-position:0 -50px

}

.tabList h4 a:hover span,

.tabList .tabOn h4 a span {

background-position:right -50px

}

.tabList .tabContentBox li{

width:auto

margin-top:0

}

.tabList .tabContentBox {

width:390px

height:130px

border:1px solid #069

text-align:left

overflow:hidden

background:#fff

position:absolute

top:22px

left:0

display:none

margin:4px

}

.tabList li:hover .tabContentBox,

.tabList .tabOn .tabContentBox {

display:block

}

/* 以下是对各项内容的CSS定义 */

.tabList .tabContentBox .blog,

.tabList .tabContentBox .group {

color:#999

line-height:2em

margin:5px

}

.tabList .tabContentBox .blog dt,

.tabList .tabContentBox .group dt,

.tabList .tabContentBox .blog dd,

.tabList .tabContentBox .group dd{

float:left

border-bottom: 1px dotted #9cf

}

.tabList .tabContentBox .blog dt,

.tabList .tabContentBox .group dt {

width:60%

white-space:nowrap

overflow:hidden

clear:left

font-size:1.1em

}

.tabList .tabContentBox .blog dt a,

.tabList .tabContentBox .group dt a {

color:#039

display:block

margin-left:5px

padding-left:12px

background: url(http://www.22333.com/d/file/20090218/f30e1a123510c963e9600e93a9d6139c.png) no-repeat 5px 11px

}

.tabList .tabContentBox .blog dt a:hover,

.tabList .tabContentBox .group dt a:hover {

color:#f90

background-position:5px -19px

}

.tabList .tabContentBox .blog dd,

.tabList .tabContentBox .group dd {

color:#0cf

width:20%

float:left

white-space:nowrap

overflow:hidden

}

.tabList .tabContentBox .blog dd a,

.tabList .tabContentBox .group dd a {

color:#069

}

.tabList .tabContentBox .blog dd a:hover,

.tabList .tabContentBox .group dd a:hover {

color:#f90

}

.tabList .tabContentBox .album li,

.tabList .tabContentBox .share li{

width:24.9%

float:left

padding-top:15px

text-align:center

}

-->

</style>

<script type="text/javascript" language="javascript">

<!--

window.onload = tabEffect

function tabEffect()

{

var allElements = document.getElementsByTagName('*')

for (var i=0 i<allElements.length i++)

{

if (allElements[i].className.indexOf('tabOption') >= 0)

{

allElements[i].onmouseover = mouseOver

}

}

}

function mouseOver()

{

tabList = this.parentNode

tabOptions = tabList.getElementsByTagName("li")

for (var i=0 i<tabOptions.length i++)

{

if (tabOptions[i].className.indexOf('tabOption') >= 0)

{

tabOptions[i].className = "tabOption"

}

}

this.className += " tabOn"

}

-->

</script>

</head>

<body>

<div class="tabList" id="tabList1">

<ul class="tabBox">

<li class="tabOption tabOn"><h4><a href="/blog/" title="单击，跳转到所有[日志]列表"><span>日志</span></a></h4>

<div class="tabContentBox">

<dl class="tabContent blog">

<dt><a href="http://www.22333.com/webdevelop/21722.html&quot title="在PHP中实现文件的上传功能的方法">在PHP中实现文件的上传功能的方法</a></dt>

<dd class="name"><a href="#11" title="">QUESTER</a></dd>

<dd>2009-01-10</dd>

<dt><a href="http://www.22333.com/graphic/21739.html&quot title="Fireworks教程:小灯泡绘制全过程">Fireworks教程:小灯泡绘制全过程</a></dt>

<dd class="name"><a href="#11" title="作者：snl">snl</a></dd>

<dd>2009-01-10</dd>

<dt><a href="http://www.22333.com/webdevelop/21720.html&quot title="PHP程序不实用大型系统的九大原因">PHP程序不实用大型系统的九大原因</a></dt>

<dd class="name"><a href="#11" title="作者：豆猫">豆猫</a></dd>

<dd>2009-01-10</dd>

<dt><a href="http://www.22333.com/media/21667.html&quot title="Flash鼠绘:绘制金属立体相框效">Photoshop制作一张旧的黑桃A扑克牌</a></dt>

<dd class="name"><a href="#11" title="作者：greengnn">greengnn</a></dd>

<dd>2009-01-10</dd>

<dt><a href="http://www.22333.com/media&quot title="日志标题：Photoshop CS3教程">Photoshop CS3教程</a></dt>

<dd class="name"><a href="#11" title="作者：amethyst01">amethyst01</a></dd>

<dd>2009-01-10</dd>

</dl>

</div>

</li>

<li class="tabOption"><h4><a href="/album/" title="单击，跳转到所有[相册]列表"><span>相册</span></a></h4>

<div class="tabContentBox">

<ul class="tabContent album">

<li><a href="#" title="查看相册内容"><img src="http://www.22333.com/d/file/20090218/b53843e1e244bd54b5d040b67f527856.jpg&quot width="80" height="100" alt="封面" title="相册的标题" /></a></li>

<li><a href="#" title="查看相册内容"><img src="http://www.22333.com/d/file/20090218/b53843e1e244bd54b5d040b67f527856.jpg&quot width="80" height="100" alt="封面" title="相册的标题" /></a></li>

<li><a href="#" title="查看相册内容"><img src="http://www.22333.com/d/file/20090218/b53843e1e244bd54b5d040b67f527856.jpg&quot width="80" height="100" alt="封面" title="相册的标题" /></a></li>

<li><a href="#" title="查看相册内容"><img src="http://www.22333.com/d/file/20090218/b53843e1e244bd54b5d040b67f527856.jpg&quot width="80" height="100" alt="封面" title="相册的标题" /></a></li> </ul>

</div>

</li>

<li class="tabOption"><h4><a href="/share/" title="单击，跳转到所有[分享]列表"><span>分享</span></a></h4>

<div class="tabContentBox">

<ul class="tabContent share">

<li><a href="#" title="查看内容"><img src="http://www.22333.com/d/file/20090218/3ed00ee15a752e7baf0671bb2772c8cc.jpg&quot width="80" height="100" alt="封面" title="相册的标题" /></a></li>

<li><a href="#" title="查看内容"><img src="http://www.22333.com/d/file/20090218/3ed00ee15a752e7baf0671bb2772c8cc.jpg&quot width="80" height="100" alt="封面" title="相册的标题" /></a></li>

<li><a href="#" title="查看内容"><img src="http://www.22333.com/d/file/20090218/3ed00ee15a752e7baf0671bb2772c8cc.jpg&quot width="80" height="100" alt="封面" title="相册的标题" /></a></li>

<li><a href="#" title="查看内容"><img src="http://www.22333.com/d/file/20090218/3ed00ee15a752e7baf0671bb2772c8cc.jpg&quot width="80" height="100" alt="封面" title="相册的标题" /></a></li>

</ul>

</div>

</li>

<li class="tabOption"><h4><a href="/group/" title="单击，跳转到所有[群组]列表"><span>群组</span></a></h4>

<div class="tabContentBox">

<dl class="tabContent group">

<dt><a href="http://www.22333.com&quot title="标题：优秀广告设计，不服不行！">优秀广告设计，不服不行！</a></dt>

<dd class="name"><a href="#11" title="群组：设计视觉">设计视觉</a></dd>

<dd>2009-01-10</dd>

<dt><a href="http://www.22333.com&quot title="标题：Photoshop 的真人动漫效果">Photoshop 的真人动漫效果</a></dt>

<dd class="name"><a href="#11" title="群组：手绘爱好者">手绘爱好者</a></dd>

<dd>2009-01-10</dd>

<dt><a href="http://www.22333.com&quot title="标题：网站内容结构化探讨">网站内容结构化探讨</a></dt>

<dd class="name"><a href="#11" title="群组：WEB标准化">WEB标准化</a></dd>

<dd>2009-01-10</dd>

<dt><a href="http://www.22333.com&quot title="标题：CSSzengarden的代码里还有什么">CSSzengarden的代码里还有什么</a></dt>

<dd class="name"><a href="#11" title="群组：WEB标准化">WEB标准化</a></dd>

<dd>2009-01-10</dd>

<dt><a href="http://www.22333.com&quot title="标题：某些人眼中的色彩">某些人眼中的色彩</a></dt>

<dd class="name"><a href="#11" title="群组：设计视觉">设计视觉</a></dd>

<dd>2009-01-10</dd>

</dl>

</div>

</li>

</ul>

</div>

</body>

</html>

要会改代码 背景给你拉

1.设置class或者id，加以区分

2.比如说上级菜单是div,如下：

<div>

<table></table>

<table></table>

</div>

那么，在css中第一个table可以用“div>table{ }“来写