阿里88的一段代码[精品]

srsman · 2006-04-08

代码:

<!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">
<!--
* {
	margin: 0; padding:0
}
body {
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
	text-align: center;
	height: auto;
	width: auto;
	background-color: #666666;
	font-size: 12px;
	color: #000000;
}
#container {
	text-align: left;
	width: 760px;
	height: 400px;
	background-color: #FFFFFF;
	padding: 20px;
}

#container #title {
	height: 28px;
}
#container #title li {
	float: left;
	list-style-type: none;
	height: 28px;
	line-height: 28px;
	text-align: center;
	margin-right: 1px;
}
#container #title ul {
	background-color: #FFFFFF;
	height: 28px;
}
#container #title a {
	text-decoration: none;
	color: #000000;
	display: block;
	width: auto;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -29px;
}
#container #title a span{
	display: block;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -29px;
	padding: 0 15px 0 15px;
}
#container #title #tag1 a:hover {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -87px;
}
#container #title #tag1 a:hover span{
	display: block;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -87px;
	padding: 0 15px 0 15px;
}
#container #title #tag2 a:hover {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left 0px;
}
#container #title #tag2 a:hover span{
	display: block;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right 0px;
	padding: 0 15px 0 15px;	
}
#container #title #tag3 a:hover {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -58px;
}
#container #title #tag3 a:hover span{
	display: block;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -58px;
	padding: 0 15px 0 15px;	
}
#container #title #tag4 a:hover {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -145px;
}
#container #title #tag4 a:hover span{
	display: block;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -145px;
	padding: 0 15px 0 15px;
}
#container #title #tag5 a:hover {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -174px;
}
#container #title #tag5 a:hover span{
	display: block; 
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -174px;
	padding: 0 15px 0 15px;
}
#container #title .selectli1 {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -87px;
}
#container #title a .selectspan1 {
	display: block;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -87px; 
	padding: 0 15px 0 15px;
}
#container #title .selectli2 {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left 0px;
}
#container #title a .selectspan2 {
	display: block; 

	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right 0px; 
	padding: 0 15px 0 15px;
}
#container #title .selectli3 {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -58px;
}
#container #title a .selectspan3 {
	display: block; 
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -58px; 
	padding: 0 15px 0 15px;
}
#container #title .selectli4 {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -145px;
}
#container #title a .selectspan4 {
	display: block; 
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -145px; 
	padding: 0 15px 0 15px;
}
#container #title .selectli5 {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -174px;
}
#container #title a .selectspan5 {
	display: block; 
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -174px; 
	padding: 0 15px 0 15px;
}
#container #content ul {margin: 10px;}
#container #content li {margin: 5px; }
#container #content li img {margin: 5px;display:block;}
#container #content {
	height: 300px;
	padding: 10px;
}
.content1 {
	border-top-width: 3px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #3A81C8;
	border-right-color: #3A81C8;
	border-bottom-color: #3A81C8;
	border-left-color: #3A81C8;
	background-color: #DFEBF7;
}
.content2 {
	border-top-width: 3px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #ff950b;
	border-right-color: #ff950b;
	border-bottom-color: #ff950b;
	border-left-color: #ff950b;
	background-color: #FFECD2;
}
.content3 {
	height: 300px;
	padding: 10px;
	border-top-width: 3px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #FE74B8;
	border-right-color: #FE74B8;
	border-bottom-color: #FE74B8;
	border-left-color: #FE74B8;
	background-color: #FFECF5;
}
.content4 {
	height: 300px;
	padding: 10px;
	border-top-width: 3px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #00988B;
	border-right-color: #00988B;
	border-bottom-color: #00988B;
	border-left-color: #00988B;
	background-color: #E8FFFD;
}
.content5 {
	height: 300px;
	padding: 10px;
	border-top-width: 3px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #A8BC1F;
	border-right-color: #A8BC1F;
	border-bottom-color: #A8BC1F;
	border-left-color: #A8BC1F;
	background-color: #F7FAE2;
}
.hidecontent {display:none;}
-->
</style>
<script language="javascript">
function switchTag(tag,content)
{
//	alert(tag);
//	alert(content);
	for(i=1; i <6; i++)
	{
		if ("tag"+i==tag)
		{
			document.getElementById(tag).getElementsByTagName("a")[0].className="selectli"+i;
			document.getElementById(tag).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="selectspan"+i;
		}else{
			document.getElementById("tag"+i).getElementsByTagName("a")[0].className="";
			document.getElementById("tag"+i).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="";
		}
		if ("content"+i==content)
		{
			document.getElementById(content).className="";
		}else{
			document.getElementById("content"+i).className="hidecontent";
		}
		document.getElementById("content").className=content;
	}
}
</script>
</head>

<body>
<div id="container">
  <div id="title">
    <ul>
      <li id="tag1"><a href="#" onclick="switchTag('tag1','content1');this.blur();" class="selectli1"><span class="selectspan1">首页</span></a></li>
      <li id="tag2"><a href="#" onclick="switchTag('tag2','content2');this.blur();"><span>下载中心</span></a></li>
      <li id="tag3"><a href="#" onclick="switchTag('tag3','content3');this.blur();"><span>产品介绍</span></a></li>
      <li id="tag4"><a href="#" onclick="switchTag('tag4','content4');this.blur();"><span>会员注册与登录</span></a></li>
      <li id="tag5"><a href="#" onclick="switchTag('tag5','content5');this.blur();"><span>联系我们</span></a></li>
    </ul>
  </div>
<div id="content" class="content1">
  <div id="content1"><p>仿淘宝网站的导航效果。此方法有几个优点：</p>1、根据字数自适应项目长度</div>	
  <div id="content2" class="hidecontent">2、不同的项目使用不同的颜色来区分</div>
  <div id="content3" class="hidecontent">3、这回需要使用到js了，呵呵</div>
  <div id="content4" class="hidecontent">4、背景图片只需要两个图片文件就足够，减少服务器负担</div>
  <div id="content5" class="hidecontent">5、这是使用到的两个图片：
         <table width="58%" border="1" cellspacing="2" cellpadding="0">
           <tr>
             <td width="70%" align="center"><img src="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" width="250" height="290" /></td>
             <td width="30%" align="center"><img src="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" width="15" height="290" /></td>
           </tr>
         </table>
  </div>
</div>  

</div>
</body>
</html>

DEMO:http://blog.621000.net/al.htm

不学无术 · 2006-04-08

这个不错。

shangjay · 2006-04-08

确实。不错

100000why · 2006-04-08

也就是选项卡效果
见过类似的
不过这个很漂亮

老林 · 2006-04-08

不错

一路走 · 2006-04-08

不错，好东西

good8 · 2006-04-09

要是能将将http://www.flash8.net/里的此代码搞定最好了，楼主试试！？

枕云 · 2006-04-10

确实的确不错。。。

Kevin · 2006-04-10

不错,收藏!

Function · 2006-04-10

作者: good8:

要是能将将http://www.flash8.net/里的此代码搞定最好了，楼主试试！？
点击展开...

效果是类似的，阿里的是通过 onclick 行为来触发，flash8 的是通过 onmouseover 来触发。

当然可能也有一些其它的细节差异，而且界面，更多的是 CSS 等效果问题。

swenge · 2006-04-10

不错收了！

BoBo · 2006-04-11

没有YAHOO.COM那个好

OUYANG · 2006-04-11

:lovely:

作者: 一路走:

不错，好东西
点击展开...

警察叔叔 · 2006-04-12

早会了

流氓兔 · 2006-04-12

:lol: 非常喜欢以前找过这样的代码可找不到今天终于出现了

Hoofei · 2006-04-12

收藏了。

kamsang · 2006-04-12

真漂亮.....

BoBo · 2006-04-12

谁能把YAHOO.COM那个提取出来

西子宜 · 2006-04-12

确实是精品

lisantt · 2006-06-17

确实的确不错。。。

论坛

阿里88的一段代码[精品]

srsman Active Member

不学无术 Ulysses 的元神

shangjay New Member

100000why New Member

老林 New Member

一路走 New Member

good8 New Member

附件文件:

{B9E76F3B-B9AF-4F29-9301-FC.jpg

枕云 New Member

Kevin New Member

Function New Member

swenge New Member

BoBo New Member

OUYANG New Member

警察叔叔 New Member

流氓兔 New Member

Hoofei New Member

kamsang New Member

BoBo New Member

西子宜 Well-Known Member

lisantt New Member

快捷检索

阿里88的一段代码[精品]

srsman Active Member

不学无术 Ulysses 的元神

shangjay New Member

100000why New Member

老林 New Member

一路走 New Member

good8 New Member

附件文件:

{B9E76F3B-B9AF-4F29-9301-FC.jpg

枕云 New Member

Kevin New Member

Function New Member

swenge New Member

BoBo New Member

OUYANG New Member

警察叔叔 New Member

流氓兔 New Member

Hoofei New Member

kamsang New Member

BoBo New Member

西子宜 Well-Known Member

lisantt New Member