包含用javascript實現li的詞條

本文目錄一覽：

• 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

運行結果：