製作自定義格架的選擇框

Question

我希望做一個「大」的選擇框，

<ul> 
     <li> 
     <div class="sbox"> 
      <img src=img/typeA.jpg></img><br/> 
      <span>Item X</span> 
     </div> 
     </li> 

     <li> 
     <div class="sbox"> 
      <img src=img/typeA.jpg></img><br/> 
      <span>Item X</span> 
     </div> 
     </li> 

     <li> 
     <div class="sbox"> 
      <img src=img/typeA.jpg></img><br/> 
      <span>Item X</span> 
     </div> 
     </li> 
    </ul> 

當你舔上每一個「禮」，做出選擇，我會改變邊框顏色的。

但是如何？這不是一個「」標籤，你可以點擊嗎？

謝謝！

Answer 1

$("li div").click(function (e) { 
$(this).css("border-color","red"); 
}); 

Answer 2

您可以使用jQuery來處理點擊每個裏，然後通過改變類li元素或CSS中添加一個邊框樣式更改邊框作爲事件的結果。

Answer 3

下面是一些片段;只需將它放在html頁面的正文中，然後嘗試單擊一個listItem。

<ul> 
    <li>my li</li> 
    <li>another li</li> 
</ul> 

<script> 
    var lis = document.getElementsByTagName("li"); 
    for(var j = 0, ceiling = lis.length; j < ceiling; j++) { 
     lis[j].onclick = function() { 
      var lis = document.getElementsByTagName("li"); 
      for(var i = 0, ceiling2 = lis.length; i < ceiling2; i++) { 
       lis[i].style.border = "0px solid white"; 
      } 
      this.style.border = "1px solid green"; 
     }; 
    } 
</script> 

Answer 4

如果邊界是所有你需要將其添加到元素標記：

onclick="this.style.border='1px solid red'" 

還添加CSS光標：指針立制手

Answer 5

東西快速將發揮不錯與其他li你可以在你的頁面，但你不想像這樣的「可選」的行爲。

首先，採用獨特的類名<li>元素，你想成爲可選：

<li class="selectable"> 

然後，你可以把這個jQuery代碼，您通常initiallize您的JS代碼：

$().ready(function() { 
    $("li.selectable").bind('click', function(e) { 
     $(this).find("div.sbox").css('border', '1px solid red'); 
    }); 
}); 

$().ready是文檔準備好的快捷方式。當用戶用selectable css className單擊<li>元素時，我們將綁定一個函數。根據您的HTML代碼，邊框將應用於帶有className「sbox」的內部div。

如果要將邊框應用於<li>本身，只需刪除find("div.sbox")部分。