首页 　· 　知识　· 　前端
仿淘宝网站的导航标签效果
佚名　　http://www.becaused.com/　　综合　　编辑:dezai　　图片来源:网络
code_main>!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""
' target=_blank>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">


无标题文档







  
    

          首页
          下载中心
          产品介绍
          会员注册与登录
          联系我们
        

  

  
    

仿淘宝网站的导航效果。此方法有几个优点：


    

          
  • 根据字数自适应项目长度

    •       
  • 不同的项目使用不同的颜色来区分

    •       
  • 无需使用脚本

    •       
  • 背景图片只需要两个图片文件就足够，减少服务器负担
           这是使用到的两个图片：
             
               
                 http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif"&n ... ;height="290" />
                 http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif"& ... ;height="290" />
               
             
          

    •     

    
  
  






上面的“滑动门技术”每个门要分别能打开各自的内容才行,即导航栏各项要与其内容有交互作用。所以我做了一个发展如下：
参照:
www.blueidea.com/bbs/newsdetail.asp?id=2368870&posts=

www.blueidea.com/bbs/NewsDetail.asp?lp=1&id=1737991
经典名人语录

引用内容：




    
        子虚乌有
        金翅擘海
        知往观来
        我太低调
    
    
    我为每一次的快乐而哭泣，我为每一次的悲伤而微笑。
    

    【※卡秀儿精品屋※】

    

    学习是件头疼的事，为了能活下去我不得不学习

    
    仍然拣尽寒枝不肯安歇 微带着后悔 寂寞沙洲我该思念谁
    
    


//Switch Tab Effect
function switchTab(tabpage,tabid){
        var oItem = document.getElementById(tabpage);   
    for(var i=0;i        var x = oItem.children(i);    
        x.className = "";
        var y = x.getElementsByTagName('a');
        y[0].style.color="#333333";
    }    
    document.getElementById(tabid).className = "Selected";
    var dvs=document.getElementById("cnt").getElementsByTagName("div");
    for (var i=0;i      if (dvs[i].id==('d'+tabid))
        dvs[i].style.display='block';
      else
        dvs[i].style.display='none';
    }
}






修改一下，这下可以切换内容了。


引用内容：
' target=_blank>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">


无标题文档




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;
    }
}





  
    

          首页
          下载中心
          产品介绍
          会员注册与登录
          联系我们
        

  


  

仿淘宝网站的导航效果。此方法有几个优点：

1、根据字数自适应项目长度    
  2、不同的项目使用不同的颜色来区分
  3、这回需要使用到js了，呵呵
  4、背景图片只需要两个图片文件就足够，减少服务器负担
  5、这是使用到的两个图片：
         
           
             http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif"&n ... ;height="290" />
             http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif"& ... ;height="290" />
           
         
  
  




 

本文作者:佚名 来源:http://www.becaused.com/
CIO之家 www.ciozj.com 微信公众号:imciow
　　　　>>频道首页　　>>网站首页 　　纠错　　>>投诉
版权声明:CIO之家尊重行业规范，每篇文章都注明有明确的作者和来源；CIO之家的原创文章，请转载时务必注明文章作者和来源；
延伸阅读
也许感兴趣的
我们推荐的
主题最新
看看其它的
上一篇
实现右侧悬浮菜单和页面一起滚动
下一篇
仿淘宝网站的导航标签效果
作者其它的文章
收藏至微信