| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 646 人关注过本帖
标题:急!!!求高手帮忙,导航栏点进页面导航栏不变色,始终在一个页面,改成点 ...
只看楼主 加入收藏
heizia
Rank: 1
等 级:新手上路
帖 子:2
专家分:0
注 册:2012-11-17
结帖率:0
收藏
已结贴  问题点数:20 回复次数:3 
急!!!求高手帮忙,导航栏点进页面导航栏不变色,始终在一个页面,改成点哪个哪个变色
代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

<html xmlns="http://www.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>公司</title>

<link href="css/index.css" rel="stylesheet" type="text/css" />

<link href="css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />

</head>

<body id="lineup">

<div id="nav">

  <ul id="nav_box" class="dropdown dropdown-horizontal">

    <li id="nav01"><a href="#" class="hidde">首页</a></li>

    <li id="nav02"><a href="#" class="dir hidde">新闻・活动</a> </li>

    <li id="nav03"><span class="dir"><a href="#" class="dir hidde">活动</a></span> </li>

    <li id="nav04"><a href="#" class="dir hidde">精品</a></li>

    <li id="nav06"><a href="#" class="hidde">服务</a></li>

    <li id="nav08"><a href="#" class="hidde">关于我们</a></li>

  </ul>

</div>

</body>

</html>



CSS如下:
ul.dropdown, ul.dropdown li, ul.dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.dropdown {
    position: relative;
    z-index: 597;
}
ul.dropdown li {
    float: left;
    vertical-align: middle;
    zoom: 1;
}
ul.dropdown li.hover, ul.dropdown li:hover {
    position: relative;
    z-index: 599;
    cursor: default;
}
ul.dropdown ul {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 598;
}
ul.dropdown ul li {
    float: none;
}
ul.dropdown ul ul {
    top: 2px;
    left: 100%;
}
ul.dropdown li:hover > ul {
    visibility: visible;
}
/*------------------------------------------------------------------------------------------------------/
 * @section        Base Style Extension
 */

ul.dropdown a, ul.dropdown span {
    display: block;
}
ul.dropdown ul a {
    width: 135px;
}
ul.dropdown ul a.dir {
    width: 135px;
}
ul.dropdown ul li:hover > *.dir {
    background: url(../images/css/bg_nav_ulthr_h.jpg) 95px center no-repeat;
}
ul.dropdown a:link, ul.dropdown a:visited {
    text-decoration: none;
}
/* NON-FIRST LEVEL */

ul.dropdown ul, ul.dropdown ul ul {
    width: 135px;
}
ul.dropdown ul ul {
    top: 0;
    right: auto;
    left: 100%;
    margin-top: 0;
    border-top: none;
    border-left: none;
    font-weight: normal;
}
/* ---- Layer 1 第一级菜单 ---- */
#nav ul li {
    background:url(../images/css/nav_line_03.jpg) right top no-repeat;
    height:30px;
    float:left;
    display:block;
}
#nav ul li#nav08 {
    background:none;
}
#nav ul li a {
    display:block;
    line-height:30px;
    width:137px;
    height:30px;
    text-align:center;
    position:relative;
    z-index:1000;
}
#nav ul li a.hidde {
    text-indent:-9999px;
}
#nav ul li#nav01 a {
    width:138px;
}
#nav #nav_box ul li ul a {
    text-indent:inherit;
}
#nav ul li a:hover {
    color:#FE0000;
}
#nav01 a:link, #nav01 a:visited {
    background:url(../images/css/nav_01.jpg) left top no-repeat;
}
#nav01 a:hover, body#homepage #nav01 a {
    background:url(../images/css/nav_01.jpg) left bottom no-repeat;
}
#nav02 a:link, #nav02 a:visited {
    background:url(../images/css/nav_02.jpg) left top no-repeat;
}
#nav02 a:hover, body#news #nav02 a {
    background:url(../images/css/nav_02.jpg) left bottom no-repeat;
}
#nav03 a:link, #nav03 a:visited {
    background-image: url(../images/css/nav_03.jpg);
    background-repeat: no-repeat;
    background-position: left top;
}
#nav03 a:hover, body#lineup #nav03 a {
    background-image: url(../images/css/nav_03.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;
}
#nav04 a:link, #nav04 a:visited {
    background:url(../images/css/nav_04.jpg) left top no-repeat;
}
#nav04 a:hover, body#env-tec #nav04 a {
    background:url(../images/css/nav_04.jpg) left bottom no-repeat;
}
#nav05 a:link, #nav05 a:visited {
    background:url(../images/css/nav_05.jpg) left top no-repeat;
}
#nav05 a:hover, body#dealer #nav05 a {
    background:url(../images/css/nav_05.jpg) left bottom no-repeat;
}
#nav06 a:link, #nav06 a:visited {
    background:url(../images/css/nav_06.jpg) left top no-repeat;
}
#nav06 a:hover, body#service #nav06 a {
    background:url(../images/css/nav_06.jpg) left bottom no-repeat;
}
#nav07 a:link, #nav07 a:visited {
    background:url(../images/css/nav_07.jpg) left top no-repeat;
}
#nav07 a:hover, body#recruit #nav07 a {
    background:url(../images/css/nav_07.jpg) left bottom no-repeat;
}
#nav08 a:link, #nav08 a:visited {
    background:url(../images/css/nav_08.jpg) left top no-repeat;
}
#nav08 a:hover, body#mitsubishi #nav08 a {
    background:url(../images/css/nav_08.jpg) left bottom no-repeat;
}
/* ---- Layer 2 第二级菜单 ---- */
#nav ul li#nav08 ul {
    width:137px;
}
#nav ul li ul li {
    border-bottom:1px solid #E6E6E6;
    border-right:1px solid #E6E6E6;
    border-left:1px solid #E6E6E6;
    background:#FFF;
    height:auto;
}
#nav ul li ul li a {
    height:auto;
    line-height:1.2;
    padding:8px 0;
}
body#news #nav ul li ul li a, body#lineup #nav ul li ul li a, body#env-tec #nav ul li ul li a, body#dealer #nav ul li ul li a, body#service #nav ul li ul li a, body#recruit #nav ul li ul li a, #nav ul li ul li a:link, #nav ul li ul li a:visited, #nav ul li ul li a:hover, body#mitsubishi #nav ul li ul li a {
    background:none;
    width:133px;
}
#nav ul li#nav01 ul li a, #nav ul linav01 ul li a:link, #nav ul linav01 ul li a:visited, #nav ul li ul linav01 a:hover {
    width:134px;
}
#nav #nav_box li#nav08 ul li a, #nav ul linav08 ul li a:link, #nav ul linav08 ul li a:visited, #nav ul li ul linav08 a:hover, body#mitsubishi #nav ul li#nav08 ul li a {
 width:135px;
}
#nav #nav_box li ul .second, #nav #nav_box .children .headerbar {
    height:30px;
    line-height:30px;
    text-align:center;
    font-weight:normal;
    font-size:12px;
    width:133px;
    color:#FFF;
}
#nav #nav_box li ul .second a, #nav #nav_box li #menu_b li a, #nav #nav_box li #menu_c li a, #nav #nav_box li #menu_d li a, #nav #nav_box li #menu_e li a, #nav #nav_box li #menu_f li a {
    background:url(../images/css/bg3.jpg) repeat 0 0;
}
#nav #nav_box li ul .second a span {
    background: url(../images/css/arrow_01.gif) 120px center no-repeat;
}
#nav #nav_box li#nav08 ul .second a span {
    background: url(../images/css/arrow_02.gif) 10px center no-repeat;
}
#nav #nav_box li#nav08 ul .second {
    width:135px;
}
#nav #nav_box h3.headerbar, #nav #nav_box .submenu {
    border-right:1px solid #E6E6E6;
    border-left:1px solid #E6E6E6;
}
#nav #nav_box h3.headerbar a {
    background:none;
    font-weight:normal;
    font-size:12px;
    width:133px;
    color:#FFF;
}
/* ---- Layer 3 第三级菜单 ---- */
#nav ul li ul li ul {
    z-index:500;
}
#nav #nav_bigbox #nav_box li ul li ul li a:link, #nav #nav_bigbox #nav_box li ul li ul li a:visited {
    color:#666;
}
#nav #nav_bigbox #nav_box li ul li ul li a:hover {
    color:#FE0000;
}
#nav ul li ul li ul li.first a {
    border-top:1px solid #E6E6E6;
}
#nav ul li#nav08 ul li ul {
    margin-left:-270px;
}

搜索更多相关主题的帖子: html content PUBLIC screen 
2012-11-17 11:11
青春无限
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
来 自:江苏
等 级:贵宾
威 望:24
帖 子:3452
专家分:19340
注 册:2012-3-31
收藏
得分:20 
看看

学 会看代码…学习写程序…学会搞开发…我的目标!呵呵是不是说大话啊!!一切皆可能
2012-11-17 13:35
huangyong
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
来 自:湖北武汉
等 级:版主
威 望:20
帖 子:603
专家分:7
注 册:2006-7-21
收藏
得分:0 
自己去研究下这个网站的代码,http://www.

其实很简单的,获取一个页面的ID,然后用JS赋予某个菜单的一个新的CSS样式即可。
2012-11-29 19:11
当然感
Rank: 1
等 级:新手上路
帖 子:1
专家分:0
注 册:2013-1-22
收藏
得分:0 
图片什么的都没有。看不到效果!最好把项目打包传上来@!!
2013-01-22 14:03
快速回复:急!!!求高手帮忙,导航栏点进页面导航栏不变色,始终在一个页面,改 ...
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.029940 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved