一个节点操作实例

这个实例是在经典论坛看到的一个求助帖，作者是用jQuery实现。我觉得这个实例还是挺实用的，便用JS来实现，并且在功能上改进了一点。

经典论坛原帖地址：http://bbs.blueidea.com/thread-3058393-1-1.html

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 5     <title></title>
 6     <style type="text/css">
 7         *{margin:0;padding:0;font-size:12px;}
 8         .clear{clear:both;}
 9         ul{margin:10px;overflow: hidden;zoom:1;}
10         li{list-style:none;float:left;display:inline;background:#E8F9FF;text-align:center;color:#999;padding:3px 9px;margin:2px;cursor:pointer;}
11         li.on{background:#FF9C00;color:#fff;}
12         #favlist{border-bottom:3px solid #99B7D0; }
13     </style>
14 </head>
15 <body>
16 <div id="favlist"><ul></ul><div class="clear"></div></div>
17 <ul id="favtags">
18         <li title="小吃快餐">小吃快餐</li>
19         <li title="南京/江浙菜">南京/江浙菜</li>
20         <li title="其它小吃">其它小吃</li>
21         <li title="面包甜点">面包甜点</li>
22         <li title="家常菜">家常菜</li>
23         <li title="快餐简餐">快餐简餐</li>
24         <li title="川菜">川菜</li>
25         <li title="面馆">面馆</li>
26         <li title="淮扬菜">淮扬菜</li>
27         <li title="甜品饮品">甜品饮品</li>
28         <li title="火锅">火锅</li>
29         <li title="面包蛋糕">面包蛋糕</li>
30         <li title="苏北土菜">苏北土菜</li>
31         <li title="金陵小吃">金陵小吃</li>
32         <li title="茶馆">茶馆</li>
33         <li title="西餐">西餐</li>
34 </ul>
35 <script type="text/javascript">
36     var tagOption = document.getElementById("favtags").getElementsByTagName("li");
37     var favTags = document.getElementById("favlist").getElementsByTagName("ul")[0];
38     for(var i=0; i<tagOption.length; i++) {
39         tagOption[i].onclick = selectTag;
40     }
41     function selectTag() {
42         var favList = favTags.getElementsByTagName("li");
43         if(favList.length > 0) {
44             var a = [];
45             for(var i=0; i<favList.length; i++) {
46                 a.push(favList[i].innerHTML);
47             }
48             if(a.indexOf(this.title) === -1) {
49                 addElement(this);
50             }
51             else {
52                 this.className = "";
53                 var favTagLi = favTags.getElementsByTagName("li");
54                 for(var i=0; i<favTagLi.length; i++) {
55                     if(favTagLi[i].innerHTML === this.title) {
56                         favTags.removeChild(favTagLi[i]);
57                     }
58                 }
59             }
60         }
61         else {
62             addElement(this);
63         }
64         
65         function addElement(thisTag) {
66             thisTag.className = "on";
67             var liObj = document.createElement("li");
68             liObj.innerHTML = thisTag.title;
69             favTags.appendChild(liObj);
70         }
71     }
72 </script>
73 </body>
74 </html>
posted @ 2012-05-04 10:31  长风freedom  阅读(308)  评论(0)  编辑  收藏  举报