如何做到点击链接后改变背景颜色

ogoss 2013-11-01 04:35:40

如图，我在网页上做了几个链接，怎么样做到当点击之后自动将这条背景颜色改变。如：点击test1，则test1背景改变，若点击test2，则test2背景改变，test1变回白色。

请各位大大帮帮忙看要如何解决，最好有完整点的代码，小弟刚开始做页面，还不太熟悉

...全文

383 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

v_huan 2014-07-04

打赏
举报

非常感谢！！！

ogoss 2013-11-01

打赏
举报

ok了我把js代码放到最后运行就能用了谢谢两位大大帮助一人40分

notlikeGaoShou 2013-11-01

打赏
举报


<!DOCTYPE HTML>
<html lang="en">
	<head>
		
		<title>测试</title>
		<style type="text/css">
		.aa{
			background-color: #fff;
		}
		.bb{
			background-color: red;
		}
		</style>
	</head>
	<body>
		<ul id="test_ul">
			<li class="aa">
				test1
			</li>
			<li class="aa">
				test2
			</li>
			<li class="aa">
				test3
			</li>
			<li class="aa">
				test4
			</li>
		</ul>
		<script type="text/javascript">
			//该方法主要的思路是通过修改对应节点的样式修改背景颜色
			function change_bg(){
				var items=document.getElementById("test_ul").childNodes;//获取li节点
				for(var i=0;i<items.length;i++){//循环每个li节点
					if(items[i].nodeName=="LI"){//如果子节点是LI标签的话
						items[i].onclick=function(){//绑定click事件
							var all_li=this.parentNode.childNodes;//获取所有li节点
							for(var j=0;j<all_li.length;j++){
								all_li[j].className="aa";//将所有的li节点的背景还原
							}
							this.className="bb";//将当前的li节点的背景设为对应的背景
						}
					}
				}
			}
			change_bg();
		</script>
	</body>
</html>

ogoss 2013-11-01

打赏
举报

谢谢大大帮忙不过我测试了下显示如图错误

<ul id="myul" class='sitemu'>

									<li ><a href='#' target='main'>test1</a></li>

									<li	><a href='#' target='main'>test1</a></li>

									<li	><a href='#' target='main'>test2</a></li>

									<li	><a href='#' target='main'>test3</a></li>

									<li	><a href='#' target='main'>test4</a></li>

									<li	><a href='#' target='main'>test5</a></li>

									<li	><a href='#' target='main'>test6</a></li>

								</ul>

var co = false;

    var as = document.getElementById('myul').getElementsByTagName('a');

    for (var i = 0; i < as.length; i++) as[i].onclick = function () {

        if (co != this) {

            if (co) co.className = '';

            co = this;

        }

        co.className = 'click';

        return false

    }

我只是改了一下<ul>的id 应该没关系吧

斯洛文尼亚旅游 2013-11-01

打赏
举报

<ul id="ul">
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
<li><a href="#">test3</a></li>
<li><a href="#">test4</a></li>
<li><a href="#">test5</a></li>
</ul>
<style>
a.click{background:#ff0000;color:#ffffff;}
</style>
<script>
    var co = false;
    var as = document.getElementById('ul').getElementsByTagName('a');
    for (var i = 0; i < as.length; i++) as[i].onclick = function () {
        if (co != this) {
            if (co) co.className = '';
            co = this;
        }
        co.className = 'click';
        return false
    }
</script>

一个黑色的Eclipse主题的插件，适合Luna版本以前的老版本。详细配置见我的博客：http://www.cnblogs.com/csulennon/p/4231405.html

jquerymobile例子包含从登陆到菜单和各种菜单切换完整设计上传只为分享