CCS实现仿淘宝无刷新导航切换效果



比较炫的仿淘宝导航切换效果,在博客里收藏共享,做皮肤的时候可以参考。

查看页面:taobaonav.html

程序代码 程序代码

<!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 #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 <9; 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 width=”950″ border=”0″ align=”center”>
  <tr>
    <td height=”94″ colspan=”3″><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>CCSOS常识</span></a></li>
      <li id=”tag5″><a href=”#” onclick=”switchTag(‘tag5′,’content5′);this.blur();”><span>培训资讯</span></a></li>
      <li id=”tag6″><a href=”#” onclick=”switchTag(‘tag6′,’content6′);this.blur();”><span>长沙旗舰馆</span></a></li>
      <li id=”tag7″><a href=”#” onclick=”switchTag(‘tag7′,’content7′);this.blur();”><span>提问区</span></a></li>
      <li id=”tag8″><a href=”#” onclick=”switchTag(‘tag8′,’content8′);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 id=”content6″ class=”hidecontent”>6.不是什么地方用ajax都合适的!</div>
<div id=”content7″ class=”hidecontent”>7.该刷新的地方还是要刷新!</div>
<div id=”content8″ class=”hidecontent”>8.刷新用cookie保存还是很不方便的!!!!!!!! </div>
</div>  
</div></td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
</table>
</body>
</html>
Categories: 设计布局

Leave a Comment