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>

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

但是怎么样？它不是“”标签，你可以点击它吗？

谢谢！

Answer 1

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

Answer 2

您可以使用jquery来处理每个li上的点击，然后通过更改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

如果需要border，则将其添加到元素标记：

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

还要添加css cursor：指向li的指针以制作手

Answer 5

快速的内容可以与您在页面中可能拥有的其他li一起使用，但您不希望表现得像“可选”的那样。

首先，将唯一的className应用于您想要选择的<li>元素：

<li class="selectable">

然后，您可以将此jQuery代码放在通常初始化JS代码的位置：

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

$().ready是文档就绪的快捷方式。当用户使用<li> css className单击selectable元素时，我们将绑定一个函数。边框将应用于带有className“sbox”的内部div，跟随您的HTML代码。

如果您希望将边框应用于<li>本身，只需删除find("div.sbox")部分。

使用自定义div框架制作选择框

5 个答案: