网站首页 手机版
 注册 登录
您现在的位置： 畅无忧设计 >> 网页特效 >> 菜单导航 >> 正文
最新文章
· JS版无限级网页折叠菜单，类似于树形
· CSS实现4级的下拉菜单
· 简洁的滑动门菜单
· jQuery带动画效果的多级下拉菜单
· 自动切换的JS菜单
· 隔指定时间选项卡自动切换
· CSS+JS实现兼容性很好的无限级下拉菜
· 自动切换的选项卡
· 仿163网盘网站的Js折叠菜单
· 随鼠标移过动态放大的菜单导航
热门文章
 自动固定在网页顶部的悬浮菜单栏
 仿天涯固定在网页顶部的导航条
 仿淘宝商城商品属性选择效果
 无限级CSS树形菜单 Ltree Ver2.0
 二级树形菜单CSS TreeMenu
 同一页面多种Tab及滑动门应用的综合
 仿淘宝网导航的选项卡效果
 自动切换的JS菜单
 适用于网站后台的竖向二级下拉导航
 政府网站常用的蓝色二级导航菜单
相关文章
自动切换的JS菜单
隔指定时间选项卡自动切换
自动切换的选项卡
仿腾讯迷你首页选项卡清爽无修饰版
同一页面多种Tab及滑动门应用的综合实例
不带三角图片却有三角效果的选项卡
可打开关闭固定底（顶）部的工具条菜单
遮罩过渡效果的图片幻灯和选项卡菜单
简洁漂亮且附带提示的二级导航菜单
横向和竖向联动的选项卡菜单
始终在页面底部的菜单导航
js和css滤镜效果导航菜单
简单实用的选项卡效果
仿淘宝网导航的选项卡效果
来源：www.cwydesign.com 更新时间：2009/5/4 2:54:25 阅读次数： 我要投稿
☉预览 ↓下载 #复制 +收藏
特效代码：
<html>
<head>
<title>仿淘宝网导航的选项卡效果</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<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(tab_selected_left_bk2.gif) no-repeat left -29px;
}
#container #title a span{
 display: block;
 background: url(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(tab_selected_left_bk2.gif) no-repeat left -87px;
}
#container #title #tag1 a:hover span{
 display: block;
 background: url(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(tab_selected_left_bk2.gif) no-repeat left 0px;
}
#container #title #tag2 a:hover span{
 display: block;
 background: url(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(tab_selected_left_bk2.gif) no-repeat left -58px;
}
#container #title #tag3 a:hover span{
 display: block;
 background: url(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(tab_selected_left_bk2.gif) no-repeat left -145px;
}
#container #title #tag4 a:hover span{
 display: block;
 background: url(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(tab_selected_left_bk2.gif) no-repeat left -174px;
}
#container #title #tag5 a:hover span{
 display: block; 
 background: url(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(tab_selected_left_bk2.gif) no-repeat left -87px;
}
#container #title a .selectspan1 {
 display: block;
 background: url(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(tab_selected_left_bk2.gif) no-repeat left 0px;
}
#container #title a .selectspan2 {
 display: block; 
 background: url(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(tab_selected_left_bk2.gif) no-repeat left -58px;
}
#container #title a .selectspan3 {
 display: block; 
 background: url(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(tab_selected_left_bk2.gif) no-repeat left -145px;
}
#container #title a .selectspan4 {
 display: block; 
 background: url(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(tab_selected_left_bk2.gif) no-repeat left -174px;
}
#container #title a .selectspan5 {
 display: block; 
 background: url(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;
 }
}
function init(){
 t=document.location.hash.replace('#','');
 if(t=='')t=1;
 switchTag('tag'+t,'content'+t);
}
</script>  
</head>
<!--把<body>改为-->
<body onLoad="init()">
<!--把下面代码加到<body>与</body>之间-->
<div id="container">
  <div id="title">
    <ul>
      <li id="tag1"><a href="#1" onClick="switchTag('tag1','content1');this.blur();" class="selectli1"><span class="selectspan1">首页</span></a></li>
      <li id="tag2"><a href="#2" onClick="switchTag('tag2','content2');this.blur();"><span>下载中心</span></a></li>
      <li id="tag3"><a href="#3" onClick="switchTag('tag3','content3');this.blur();"><span>产品介绍</span></a></li>
      <li id="tag4"><a href="#4" onClick="switchTag('tag4','content4');this.blur();"><span>会员注册与登录</span></a></li>
      <li id="tag5"><a href="#5" 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="tab_selected_left_bk2.gif" width="250" height="290" /></td>
          <td width="30%" align="center"><img src="tab_selected_right_bk2.gif" width="15" height="290" /></td>
        </tr>
      </table>
    </div>
  </div>  
</div>
</body>
</html>
☉预览 ↓下载 #复制 +收藏
特效说明：
仿淘宝网导航的选项卡效果
  • 上一篇文章： 没有了
  • 下一篇文章：
    • 关于我们 - 联系我们 - 广告服务 - 在线投稿 - 友情链接 - 网站地图 - 版权声明
    CopyRight 2008-2010, CWYDESIGN.COM - 畅无忧设计, Inc. All Rights Reserved
    滇ICP备09005765号