本文目录一览：
- 1、如何利用JS实现在li中添加或删除class属性
- 2、javascript 怎么获取 li里面点击的元素索引
- 3、javascript 实现点击LI变大，其他LI变小
- 4、js中怎样动态添加一个li
如何利用JS实现在li中添加或删除class属性
可以使用jQuery的attr方法来实现对某一元素的的class的属性的添加或者删除，attr() 方法设置或返回被选元素的属性值.根据该方法不同的参数，其工作方式也有所差异，可以使用removeclass来删除class属性。
工具原料：编辑器、浏览器
1、为li添加class属性：
为某个li元素添加class=“special”的属性
$(‘li’).attr(‘class’,’special’);
2、删除class属性：
$(“li”).removeClass(“special”);
});
javascript 怎么获取 li里面点击的元素索引
用JS遍历就可以做，代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
ul id=”test”
ul
li111/li
li222/li
li333/li
li444/li
/ul
/ul
script
window.onload=function(){
var ul=document.getElementById(‘test’);
var ul_lis=ul.getElementsByTagName(‘li’);
for (var i = 0;i ul_lis.length; i++) {
ul_lis[i].index = i;
ul_lis[i].onclick=function(){
var j=this.index+1;
alert(j);
}
}
};
/script
如果想简单的放用jQuery很方便就可以获取。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ul id=”test”
ul
li111/li
li222/li
li333/li
li444/li
/ul
/ul
script
$(“#test li”).click(function(){
var index = $(this).index()+1;
alert(index);
return false;
});
/script
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。
javascript 实现点击LI变大，其他LI变小
给LI绑定一个点击事件
$(‘#xxx’).click(function(){
$(‘#xxx’).setAttribute(”,”);
})
用这种方式去控制你当前点击的LI块的CSS样式就OK了
js中怎样动态添加一个li
这是使用js增加li的示例，供您参考：
!doctype html
html
head
meta charset=”utf-8″
titlejs增添li元素/title
/head
body
ul id=’ul1′ onClick=”add()”
li点击这里增加一个li行/li
/ul
script
var cnt = 1; // 用于行计数
function add() {
var elem_li = document.createElement(‘li’); // 生成一个 li元素
elem_li.innerHTML = ‘这是增加的一行’ + cnt ++; // 设置元素的内容
document.getElementById(‘ul1’).appendChild(elem_li); // 添加到UL中去
}
/script
/body
/html
运行结果：
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/301071.html
微信扫一扫 
支付宝扫一扫 