Javascript 使用自定义div框架创建选择框

我想做一个“大”的选择框

    <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>

项目十




项目十




项目十

当你舔每个“li”时，你会做出选择，我会改变它的边框颜色

但是怎么做呢？这不是一个“”标签，你能点击它吗

---

谢谢

您可以使用jquery处理对每个li的单击，然后通过更改li元素的类或在css中添加边框样式来更改事件的结果边框。

下面是一些片段；只需将它放在html页面的主体中，然后尝试单击列表项

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

<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>

我的李
另一里

var lis=document.getElementsByTagName（“li”）；
对于（变量j=0，上限=lis.length；j<上限；j++）{
lis[j].onclick=function（）{
var lis=document.getElementsByTagName（“li”）；
for（var i=0，ceiling2=lis.length；i

如果只需要边框，请将其添加到元素标记中：

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

---

还可以添加css光标：指向li的指针，使手的动作快速，可以很好地与页面中的其他

li玩，但您不希望表现为这种“可选择的”li

首先，将唯一的类名应用于要选择的
元素：

<li class="selectable">

$（）.ready
是文档就绪的快捷方式。当用户单击带有
可选
css类名的
元素时，我们将绑定一个函数。边框将应用于类名称为“sbox”的内部
div
，位于HTML代码之后

如果要将边框应用于
本身，只需删除
查找（“div.sbox”）
部分

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