JS控制li,点击li时自动加上class

dai_jiawei 2014-05-26 09:30:36

JS控制li,点击li时给当前的加上class="current",同时删除上一个的。默认首页那个一开始就有那class
<li class="current"><a href="index.jsp">首页</a></li>
<li><a href="user.jsp">用户</a></li>
<li><a href="product.jsp">商品</a></li>
<li><a href="searchOrder">订单</a></li>
<li><a href="loadMessage">留言</a></li>
<li><a href="loadNews">新闻</a></li>

...全文

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

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

健壮男子 2021-06-12

打赏
举报

```
// 点击 form-item 时为其添加className
var component = document.querySelector('.component-config-input-form')
var elements = component.getElementsByClassName('el-form-item')
Array.from(elements).forEach(elem => {
if (!elem.addEventListener) return
elem.addEventListener('click', event => {
if (!event.target.classList.contains('form-item-noselect')) {
this.initFormItemClassName()
event.target.classList.add('form-item-selected')
}
})
})
```

学学你们 2014-05-29

打赏
举报

[code=javascript] <script type="text/javascript"> $('li').click(function(event) { /* Act on the event */ $('li').removeClass('current'); $(this).addClass('current'); }); </script>

Hertz_liu 2014-05-27

打赏
举报

引用 1 楼 vincentguo_ 的回复:


        <script type="text/javascript">
        $('li').click(function(event) {
            /* Act on the event */
             $('li').removeClass('current');
             $(this).addClass('current');
        });
        </script>

就这样

似梦飞花 2014-05-26

打赏
举报

<!DOCTYPE html PUBLIC "-//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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.current{
	color:#F00;
}
</style>
</head>

<body>
<ul>
<li class="current"><a href="index.jsp">首页</a></li>
<li><a href="user.jsp">用户</a></li>
<li><a href="product.jsp">商品</a></li>
<li><a href="searchOrder">订单</a></li>
<li><a href="loadMessage">留言</a></li>
<li><a href="loadNews">新闻</a></li>
</ul>
</body>
<script type="text/javascript">
window.onload=function(){
	var current=document.getElementsByTagName('li')[0];
	document.body.onclick=function(e){
		var a=e||window.event;
		var src=a.srcElement||a.target;
		src=src.parentNode;
		if(src.tagName.toLowerCase()=='li'){
			if(current){
				current.className='';
			}
			current=src;
			src.className='current';
			if(a.preventDefault){
				a.preventDefault();
			}else{
				a.returnValue=false;
			}
		}
	}
}
</script>
</html>

vincentguo_ 2014-05-26

打赏
举报


        <script type="text/javascript">
        $('li').click(function(event) {
            /* Act on the event */
             $('li').removeClass('current');
             $(this).addClass('current');
        });
        </script>