打印

[求助] 请问如何设置导航菜单高亮显示

verynic [楼主]

新手上路

帖子: 29
体力: 31
威望: 0
当前: 山东济南
离线: 9 天

1^# 大中小发表于 2008-8-5 17:00

请问如何设置让导航菜单的当前项高亮显示?

比如说, 我在头部导航菜单设置里面设置了A、B、C、D、E菜单项, 当我在页面上点击某一项时, 它的class=current,而其它的为空, 这样就能突出显示当前菜单....

请问如何实现??谢谢！

[ 本帖最后由 verynic 于 2008-8-6 14:33 编辑 ]

TOP

做西部数码代理.Cn1元国际45元 | 微软开发者工具互动网站

cuikai

银牌会员

帖子: 1710
体力: 2115
威望: 9
当前: 北京海淀区
离线: 1 天

专长 UI,前端制作,项目管理

2^# 大中小发表于 2008-8-5 17:12

为了提升当前项的优先级可以使用ID来单独给样式

没事写写Blog,想想生活有多艰难..囧

TOP

美橙vps独立IP月付189元 | 千千静听皮肤设计大赛

badwish

做个好人

银牌会员

帖子: 1151
体力: 1183
威望: 0
当前: 广东东莞

专长 前端制作,ASP,.NET

3^# 大中小发表于 2008-8-5 17:20

有时候，用JS也不错的。

我不去当和尚，是因为我已看破了红尘！

TOP

activeTechPros 共享IT行业薪资信息 | 《疯狂的程序员》劲爆上市

verynic [楼主]

新手上路

帖子: 29
体力: 31
威望: 0
当前: 山东济南
离线: 9 天

4^# 大中小发表于 2008-8-5 17:22

不知道怎么给：你看discuz用的是if句
<li class="current"><a href="search.php{if !empty($fid)}?srchfid=$fid{/if}">{lang search}</a></li>
<li class="current"><a href="tag.php">{lang tag}</a></li>

discuz作用在li上，效果如 www.dogsky.com

而www.wordpress.org/却放在tag <a>上

确实不知道怎么处理，现在想模仿www.wordpress.org，只能从代码里看到current做标志，但如何让current在菜单见动态切换呢？请指教

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

verynic [楼主]

新手上路

帖子: 29
体力: 31
威望: 0
当前: 山东济南
离线: 9 天

5^# 大中小发表于 2008-8-5 17:29

简而言之，discuz的if形式
<li class="current"><a href="/search.php">搜索</a></li>

TOP

verynic [楼主]

新手上路

帖子: 29
体力: 31
威望: 0
当前: 山东济南
离线: 9 天

6^# 大中小发表于 2008-8-6 10:49

请帮忙！

TOP

zhmels

I蛋壳

初级会员

帖子: 55
体力: 117
威望: 0
当前: 辽宁沈阳
离线: 20 天

专长 网页设计,前端制作,JS

7^# 大中小发表于 2008-8-6 13:14

你是说的这种效果吗？

<!DOCTYPE html PUBdtC "-//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">

</style>
<script>
	function inputs(){
		var input = document.getElementsByTagName('input');
		for(i=0;i<input.length;i++){
			if (input[i].className=='input'){
				input[i].onfocus = function(){
					this.style.border='1px solid #009900';
				}
				input[i].onblur  = function(){
					if(this.value==''){
						this.style.backgroundColor='#F7DBD4';
						this.style.border='1px inset #CCCCCC';
						//alert('您还没有输入内容哦');
					}else{
						this.style.backgroundColor='#EBF7D4';
						this.style.border='1px inset #CCCCCC';
						  }
				}
			}
		}
	}
	
	function main(){
		var target = document.getElementById('tit');
		var divs = target.getElementsByTagName('div'); 
		var forms = document.getElementsByTagName('form');
		for (i=0;i<divs.length;i++){
			divs[i].onclick = function () {
				var names = this.id + 's';
				for(i=0;i<divs.length;i++){
					divs[i].className='main';
				}
				this.className=this.className + ' this';
				for(i=0;i<forms.length;i++){
					forms[i].style.display='none';
				}
				document.getElementById(names).style.display='block';
			}
		}
	}
	function fun(){
		inputs();
		main();
	}
window.onload = fun ;
</script>
</head>
<body>
<div id="tit">
  <div class="main this" id="login">登录</div>
  <div class="main" id="reg">注册</div>
  <span style="clear:both;display:block;"></span></div>
<div class="b">
    <div style="clear:both"><form id="logins"> 
      <dl>
        <dt>登录帐号：<input name="textfield" type="text" class="input" id="textfield" />
        </dt>
        <dd>请正确输入您的登录名</dd>
        <dt>登录密码：<input name="textfield2" type="password" class="input" id="textfield2" />
        </dt><dd><a href="#">忘记密码?</a></dd> 
        <dd><button type="submit">登录</button>&nbsp;<button type="reset">重写</button></dd>
      </dl>
    </form></div>
  
  
    <div style="clear:both"><form id="regs" style="display:none"> 
      <dl>
        <dt>登录帐号：<input name="textfield" type="text" class="input" id="textfield" />
        </dt>
        <dd>最多10个汉字或20个数字或字母</dd>
        <dt>设置密码：<input name="textfield2" type="password" class="input" id="textfield2" />
        </dt><dd>最少5个字符</dd> 
        <dt>确认密码：<input name="textfield3" type="password" class="input" id="textfield3" />
        </dt><dd>请再次输入您设置的密码 </dd>   
        <dt>电子信箱：<input name="textfield4" type="text" class="input" id="textfield4" /></dt><dd>在您密码丢失时可以帮助您顺利的找回密码，请您提供准确的邮箱地址</dd>
        <dt>您的性别：<label for="radio">先生</label><input name="radio" type="radio" id="radio" value="radio" checked="checked" />
        &nbsp;<label for="radio2">女士</label><input type="radio" name="radio" id="radio2" value="radio" /></dt>
        <dd><button type="submit">注册</button>&nbsp;<button type="reset">重置</button></dd>
      </dl>
      </form></div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

崇尚自由生活！

TOP

verynic [楼主]

新手上路

帖子: 29
体力: 31
威望: 0
当前: 山东济南
离线: 9 天

8^# 大中小发表于 2008-8-6 14:30

就是导航菜单高亮显示。

TOP