菜单怎么实现点击后变色

lizhen_1130 2014-07-21 11:55:45

<div id="PARENT">

<ul id="nav">
<li><a href="#Menu=ChildMenu1" onclick="checkURL('<%=request.getContextPath()%>/capitalAction.do?method=getCapitalInfo')">资金股票</a>
</li>
<li><a href="#Menu=ChildMenu2" onclick="checkURL('<%=request.getContextPath()%>/formulaAction.do?method=getFormulaList')">公式管理</a>
</li>
<li><a href="#Menu=ChildMenu3" onclick="checkURL('<%=request.getContextPath()%>/strategyAction.do?method=getStrategyList')">策略管理</a>
</li>
<li><a href="#Menu=ChildMenu3" onclick="checkURL('<%=request.getContextPath()%>/manualOrderAction.do?method=getOrderInit')">手动下单</a>
</li>
<li><a href="#Menu=ChildMenu4" onclick="DoMenu('ChildMenu4')">查询管理</a>
<ul id="ChildMenu4" class="collapsed">
<li><a href="#" onclick="checkURL('<%=request.getContextPath()%>/entrustAction.do?method=getEntrustInfo')">  委托查询</a></li>
<li><a href="#" onclick="checkURL('<%=request.getContextPath()%>/bargainAction.do?method=getBargainInfo')">  成交查询</a></li>
<li><a href="#" onclick="checkURL('<%=request.getContextPath()%>/positionAction.do?method=getPositionInfo')">  持仓查询</a></li>
<li><a href="#" onclick="checkURL('../page/query/capital/capital.jsp')">  资金明细</a></li>
</ul>
</li>
</ul>

</div>
...全文
4384 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
lk0098 2014-07-24
  • 打赏
  • 举报
回复
你是要实现菜单在没访问过,访问过,还有鼠标悬停不同效果吗 为什么要用jquery?css完全可以解决了啊。 用<a>标签下以下几个属性 link:连接平常的状态 visited:连接被访问过之后 hover:鼠标放到连接上的时候 active:连接被按下的时候 具体用法 A:link { color: #000000; TEXT-DECORATION: none } A:visited { COLOR: #000000; TEXT-DECORATION: none } A:hover { COLOR: #ff7f24; text-decoration: underline; } A:active { COLOR: #ff7f24; text-decoration: underline; } 你可以自己做一个标签看看不同的效果 http://www.cnblogs.com/yangfeng/archive/2009/07/25/1530962.html http://www.cnblogs.com/xiaochaohuashengmi/archive/2010/09/06/1819624.html
JPF1024 2014-07-21
  • 打赏
  • 举报
回复


<!DOCTYPE HTML>
<head>
<title>数据</title>
<meta characterset="utf-8" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" ></script>
</head>
<body>
<header>
	<nav>
		<ul>
			<li><a href="javascript:void(0)" id="a1" onclick="chcolor(1)">首页</a></li>
			<li><a href="javascript:void(0)" id="a2" onclick="chcolor(2)">添加</a></li>
			<li><a href="javascript:void(0)" id="a3" onclick="chcolor(3)">管理</a></li>
			<li><a href="javascript:void(0)" id="a4" onclick="chcolor(4)">操作</a></li>
			</ul>
	<nav>
</header>
</body>
<script type="text/javascript">
	function chcolor(ids)
	{
		for(var i=1;i<5;i++)
		{
			$("#a"+i).css({"color":"#000","font-size":"14px","background-color":"#fff"});
		}
		$("#a"+ids).css({"color":"red","font-size":"20px","background-color":"#333"});
	}
</script>
</html>



大概是这样的。关于设置css可以去看下jquery的api..
lizhen_1130 2014-07-21
  • 打赏
  • 举报
回复
<a href="javascript:void(0)' id="clickindex1" onclick="clickcolor('#clickindex1')" >改变颜色</a>


function clickcolor(idclick)
{
//必须先导入jquery的类库.
//jquery可以实现.
$(idclick).css("background-color", "red");//改变颜色
}
试试[/quote]点击别的,这个怎么恢复成原先的颜色啊[/quote] id用数字,比如: a1 a2 a3 a4 a5 先把所有的改成原来的颜色,然后把点击的改成新的颜色.你试试,[/quote] 你不会要我一个个写吧
引用 6 楼 dcxy0 的回复:
[quote=引用 4 楼 lizhen_1130 的回复:] [quote=引用 1 楼 dcxy0 的回复:]
<a href="javascript:void(0)' id="clickindex1" onclick="clickcolor('#clickindex1')" >改变颜色</a>


function clickcolor(idclick)
{
//必须先导入jquery的类库.
//jquery可以实现.
$(idclick).css("background-color", "red");//改变颜色
}
试试
点击别的,这个怎么恢复成原先的颜色啊[/quote] id用数字,比如: a1 a2 a3 a4 a5 先把所有的改成原来的颜色,然后把点击的改成新的颜色.你试试,[/quote]
引用 6 楼 dcxy0 的回复:
[quote=引用 4 楼 lizhen_1130 的回复:] [quote=引用 1 楼 dcxy0 的回复:]
<a href="javascript:void(0)' id="clickindex1" onclick="clickcolor('#clickindex1')" >改变颜色</a>


function clickcolor(idclick)
{
//必须先导入jquery的类库.
//jquery可以实现.
$(idclick).css("background-color", "red");//改变颜色
}
试试
点击别的,这个怎么恢复成原先的颜色啊[/quote] id用数字,比如: a1 a2 a3 a4 a5 先把所有的改成原来的颜色,然后把点击的改成新的颜色.你试试,[/quote]
JPF1024 2014-07-21
  • 打赏
  • 举报
回复
引用 4 楼 lizhen_1130 的回复:
[quote=引用 1 楼 dcxy0 的回复:]
<a href="javascript:void(0)' id="clickindex1" onclick="clickcolor('#clickindex1')" >改变颜色</a>


function clickcolor(idclick)
{
//必须先导入jquery的类库.
//jquery可以实现.
$(idclick).css("background-color", "red");//改变颜色
}
试试
点击别的,这个怎么恢复成原先的颜色啊[/quote] id用数字,比如: a1 a2 a3 a4 a5 先把所有的改成原来的颜色,然后把点击的改成新的颜色.你试试,
lizhen_1130 2014-07-21
  • 打赏
  • 举报
回复
引用 3 楼 lk0098 的回复:
题主意思是点击后的和没有点击过的区分开颜色不同吧,是需要css那边设置<a>标签下的不同状态颜色不同吧
是的,不知道怎么设置
lizhen_1130 2014-07-21
  • 打赏
  • 举报
回复
引用 1 楼 dcxy0 的回复:
<a href="javascript:void(0)' id="clickindex1" onclick="clickcolor('#clickindex1')" >改变颜色</a>


function clickcolor(idclick)
{
//必须先导入jquery的类库.
//jquery可以实现.
$(idclick).css("background-color", "red");//改变颜色
}
试试
点击别的,这个怎么恢复成原先的颜色啊
lk0098 2014-07-21
  • 打赏
  • 举报
回复
题主意思是点击后的和没有点击过的区分开颜色不同吧,是需要css那边设置<a>标签下的不同状态颜色不同吧
皓月长空 2014-07-21
  • 打赏
  • 举报
回复
.new{color:red;} 如:$('.left li').click(function(){ $('.left li').removeClass('new'); $(this).addClass('new'); })
JPF1024 2014-07-21
  • 打赏
  • 举报
回复
<a href="javascript:void(0)' id="clickindex1" onclick="clickcolor('#clickindex1')" >改变颜色</a>


function clickcolor(idclick)
{
//必须先导入jquery的类库.
//jquery可以实现.
$(idclick).css("background-color", "red");//改变颜色
}
试试

61,112

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧