求助一种，用不同铵钮图片制作成的选取项卡

yougucaofan · 发表于 2007-4-29 16:00:07

开始的时候为图片1的效果
变化的时候为第二个的效果

已经上网搜过没有找到相似的，本人对JS不了解。请朋友们多多帮忙。

先谢谢了

King1988 · 发表于 2007-4-29 16:13:53

这种效果应该是用两张图片就好了吧～

cycloned · 发表于 2007-4-29 16:15:23

这个我也找过，最后没结果

yougucaofan · 发表于 2007-4-29 16:28:22

我找了一个，谁能帮我改一下？？？可以把我给的那两个图片切成四个

<!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>

#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 #tag6 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 -203px;
}
#container #title #tag6 a:hover span{
	display: block;
	background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif") no-repeat right -203px;
	padding: 0 15px 0 15px;
}
#container #title #tag7 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 -232px;
}
#container #title #tag7 a:hover span{
	display: block;
	background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif") no-repeat right -232px;
	padding: 0 15px 0 15px;
}
#container #title #tag8 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 -261px;
}
#container #title #tag8 a:hover span{
	display: block;
	background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif") no-repeat right -261px;
	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 #title .selectli6 {
	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 -203px;
}
#container #title a .selectspan6 {
	display: block;
	background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif") no-repeat right -203px; 
	padding: 0 15px 0 15px;
}
#container #title .selectli7 {
	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 -232px;
}
#container #title a .selectspan7 {
	display: block;
	background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif") no-repeat right -232px; 
	padding: 0 15px 0 15px;
}
#container #title .selectli8 {
	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 -261px;
}
#container #title a .selectspan8 {
	display: block;
	background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif") no-repeat right -261px; 
	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;
}
.content6 {
	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: #DD5A31;
	border-right-color: #DD5A31;
	border-bottom-color: #DD5A31;
	border-left-color: #DD5A31;
	background-color: #E7A996;
}
.content7 {
	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: #B65E5D;
	border-right-color: #B65E5D;
	border-bottom-color: #B65E5D;
	border-left-color: #B65E5D;
	background-color: #C29A99;
}
.content8 {
	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: #B67BD8;
	border-right-color: #B67BD8;
	border-bottom-color: #B67BD8;
	border-left-color: #B67BD8;
	background-color: #E8C4FF;
}
.hidecontent {display:none;}
-->
</style>
<script language="javascript">
function switchTag(tag,content)
{
//	alert(tag);
//	alert(content);
	for(i=1; i <3; 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>
<table align="center" border="0" width="950">
  <tbody><tr>
    <td colspan="3" height="94"><div id="container">
  <div id="title">
    <ul>
      <li id="tag1"><a href="#" onclick="switchTag('tag1','content1');this.blur();" class=""><span class="">首页</span></a></li>
      <li id="tag2"><a class="" href="#" onclick="switchTag('tag2','content2');this.blur();"><span class="">产品介绍</span></a></li>
    </ul>
  </div>
<div id="content" class="content3">
  <div class="hidecontent" id="content1"><p>仿淘宝网站的导航效果。此方法有几个优点：</p>1、根据字数自适应项目长度</div>	
  <div id="content2" class="hidecontent">2、不同的项目使用不同的颜色来区分</div>
</div>  
</body></html>

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

yxljames · 发表于 2007-4-29 23:41:04

滑动门就是这样的

帐号		自动登录	找回密码
密码			注册