20110125 学习记录2：图片背景选项卡

于 2011-01-26 10:11:00 发布
阅读量96 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/neru/archive/2011/01/26/1945150.html
本文介绍了一个仿照淘宝网站导航栏效果的实现方案，利用HTML、CSS及少量JavaScript代码完成。该方案支持根据文字长度自适应调整导航项宽度，并且为不同导航项提供了不同颜色背景以区分，同时仅使用两张背景图片减少了服务器负担。

 

这里的图片只是做背景用的，通过上下调整高度来切换不颜色。确实很巧妙。

可是我需要的是每个tab都是不一样的图片，带tab name的，而不是单纯的背景...

唉~都找不到一个好的例子，我改的乱七八糟的...  (┬＿┬)

 

ExpandedBlockStart.gif代码
    

<!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>下载中心& lt;/span></a></li>
      <li id="tag3"><a href="#" onclick="switchTag('tag3','content3');this.blur();"><span>产品介绍& lt;/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>联系我们& lt;/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>

 

http://yueyingxingcheng3.blog.163.com/blog/static/18504054200792041521553/

 

一个封装了的选项卡效果js 

http://www.blueidea.com/tech/web/2008/5460.asp
 

转载于:https://www.cnblogs.com/neru/archive/2011/01/26/1945150.html

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值