如何用jquery给li加边框

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

实例演示如下:

1、HTML结构

<style>

  ul.test li{display:inline-blockborder: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、效果演示

圆角，用两种方法样式的方法，一种就是重叠，用<b style="border-top:1px solid #777777height:1pxoverflow:hiddenwidth:98px"></b>

<b style="border-right:1px solid #777777border:1px solid #777777height:1pxoverflow:hiddenwidth:100px"></b>

<b style="border-right:1px solid #777777border:1px solid #777777height:50pxoverflow:hiddenwidth:102px"></b>

用这种重叠的方法作出一个圆角，效果虽然比较差，但是平时的应用还是可以了。注意点就是overflow:hidden一定要有，

还有一种就是用绝对定位的方法，切图切下圆角，定位。这样效果比较美观

<style type="text/css">

.border{border:1px solid #999}

</style>

$('img').click(function(){

$(this).addClass('border')

})

---