Home  >  Article  >  Web Front-end  >  菜单怎么实现点击后变色_html/css_WEB-ITnose

菜单怎么实现点击后变色_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 09:26:433351browse






回复讨论(解决方案)


<a href="javascript:void(0)' id="clickindex1" onclick="clickcolor('#clickindex1')" >改变颜色</a>



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


试试

.new{color:red;}
如:$('.left li').click(function(){
              $('.left li').removeClass('new');
              $(this).addClass('new');
        })

题主意思是点击后的和没有点击过的区分开颜色不同吧,是需要css那边设置标签下的不同状态颜色不同吧

<a href="javascript:void(0)' id="clickindex1" onclick="clickcolor('#clickindex1')" >改变颜色</a>



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


试试

点击别的,这个怎么恢复成原先的颜色啊

题主意思是点击后的和没有点击过的区分开颜色不同吧,是需要css那边设置标签下的不同状态颜色不同吧

是的,不知道怎么设置



<a href="javascript:void(0)' id="clickindex1" onclick="clickcolor('#clickindex1')" >改变颜色</a>



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


试试

点击别的,这个怎么恢复成原先的颜色啊

id用数字,比如:

a1
a2
a3
a4
a5

先把所有的改成原来的颜色,然后把点击的改成新的颜色.你试试,



<a href="javascript:void(0)' id="clickindex1" onclick="clickcolor('#clickindex1')" >改变颜色</a>



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


试试点击别的,这个怎么恢复成原先的颜色啊

id用数字,比如:

a1
a2
a3
a4
a5

先把所有的改成原来的颜色,然后把点击的改成新的颜色.你试试,
你不会要我一个个写吧




<a href="javascript:void(0)' id="clickindex1" onclick="clickcolor('#clickindex1')" >改变颜色</a>



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


试试

点击别的,这个怎么恢复成原先的颜色啊

id用数字,比如:

a1
a2
a3
a4
a5

先把所有的改成原来的颜色,然后把点击的改成新的颜色.你试试,




<a href="javascript:void(0)' id="clickindex1" onclick="clickcolor('#clickindex1')" >改变颜色</a>



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


试试

点击别的,这个怎么恢复成原先的颜色啊

id用数字,比如:

a1
a2
a3
a4
a5

先把所有的改成原来的颜色,然后把点击的改成新的颜色.你试试,

<!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..

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn