通過自定義屬性，排他的原理實現列表的表頭和對應內容的切換
阿新 • • 發佈：2018-11-10
要點：
1.自定義屬性，可以用來存放類似於這個案例中索引的不是自帶的屬效能滿足的，通過setAttribute（"自定義屬性名"，值）來自定義一個屬性，切記不可直接通過this.自定義屬性來設定值
同時，獲取和移除自定義屬性，分別是getAttribute（）和removeAttribute（）來實現，removeAttribute（）可以將屬性徹底刪除掉，自帶的屬性也可以徹底刪除，而不是將其賦值為null
2.程式的原則，其中有一個原則是經可能的快，這個例項本來我準備將li標籤，存放在偽陣列中的這個操作，放在下面將bd內容替換的操作附近，因為邏輯感超棒。但是，我忽略了 ，每次迴圈獲取一次會拖慢速度，下次注意。
3.針對與這個案例，核心思想是上下兩個對應元素的操作應該對應，這也就是為什麼新增索引。
html程式碼和內建j程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } ul { list-style-type: none; } .box { width: 400px; height: 300px; border: 1px solid #ccc; margin: 100px auto; overflow: hidden; } .hd { height: 45px; } .hd span { display: inline-block; width: 90px; background-color: pink; line-height: 45px; text-align: center; cursor: pointer; } .hd span.current { background-color: purple; } .bd li { height: 255px; background-color: purple; display: none; } .bd li.current { display: block; } </style> </head> <body> <div class="box" id="box"> <div class="hd"> <span class="current">陳小帥</span> <span>陳大帥</span> <span>陳帥帥</span> <span>chenxiaoshuai</span> </div> <div class="bd"> <ul> <li class="current">陳小帥是真的帥</li> <li>陳大帥是真的帥</li> <li>陳帥帥是真的帥</li> <li>chenxiaoshuai是真的帥</li> </ul> </div> </div> <script type="text/javascript"> function my$(id){ return document.getElementById(id); } var box = my$("box"); // 先通過id獲取hd和bd的盒子 var hd = box.getElementsByTagName('div')[0]; // js中字串目前單引號和雙引號沒有區分，有時雙引號內部巢狀雙引號引起錯誤的話，將內部的雙引號改為單引號 var bd = box.getElementsByTagName('div')[1]; // 上面分別獲取兩個div的盒子，通過getElementsByTagName()獲取到的物件儲存到偽陣列中，通過陣列的方法呼叫偽元素中的標籤 var lis = bd.getElementsByTagName("li"); // 獲取ul下面所有的li標籤，儲存在偽陣列lis中 // 這段程式碼原來為了更具有邏輯性，放在下面的k迴圈的，但是考慮到每次迴圈獲取一次，會拖慢執行效率 var spans = hd.getElementsByTagName('span'); for(var i=0; i<spans.length;i++){ spans[i].setAttribute("index",i); // 在執行迴圈之前，將每個位置的索引新增一下，後面對應的索引做相同的操作 spans[i].onclick = function(){ for(var j=0;j<spans.length;j++){ spans[j].removeAttribute("class"); // 跟div只用一個屬性的排他性，寫的方法一致，先清除所有的樣式 } this.className = "current"; // 將被點選選中的元素的類名設定為current高亮顯示 var index = this.getAttribute("index"); // 被點選之後，先將樣式改變一下，再將點選的元素索引獲取到，用在下面對應位置的元素的索引 for(var k=0;k<lis.length;k++){ lis[k].removeAttribute("class"); } // 將下面的div的類名全部清除 lis[index].className = "current"; // 通過相同位置的索引，將下面顯示對應的標籤 } } </script> </body> </html>
效果:
