Question

如何用jquery给li加边框

像淘宝这样点击什么什么加边框！

Answer 1

思路：为添加边框样式设置一个class（设为selected），点击li后使用removeClass()方法删除其他li的selected类，并且为当前li添加selected类。

实例演示如下:

1、HTML结构

<style>

    ul.test li{display:inline-block;border:1px solid white;}  /*默认为白色边框*/

    .selected{border:1px solid #ff99cc !important;}

</style>

<ul class="test">

    <li>Glen</li>   <li>Tane</li>    <li>John</li>    <li>Ralph</li>

</ul>

2、jquery代码

$(function(){

    $("li").click(function() {

        $(this).siblings('li').removeClass('selected');    // 删除其他li的边框样式

        $(this).addClass('selected');                            // 为当前li添加边框样式

    });

}); 

3、效果演示

Answer 2

点击<li>标签加边框

<script>
    $(function() {
        $('li').mousedown(function() {
            $(this).css('border', 'solid 2px red')
        })
    })
</script>

事先个<li>标签加css白色边框，和背景同色边框就，要不然会错位css边框是多少jquery边框也设置多少。

追问

但是我需要点击另外一个li后 之前的li边框要消失啊！！大神求帮忙

追答

添加边框前初始化所有<li>就好了。

<script>
    $(function() {
        $('li').mousedown(function() {
            $('li').css('border', 'solid 2px #FFF')//添加这一句
            $(this).css('border', 'solid 2px red')
        })
    })