jquery边框,jquery设置边框样式

如何用jquery给li加边框

思路：为添加边框样式设置一个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"

    liGlen/li   liTane/li    liJohn/li    liRalph/li

/ul

2、jquery代码

$(function(){

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

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

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

    });

});

3、效果演示

相关问答

Q1: jQuery attr 设置的边框为啥都是黑色的

jq的attr()是获取属性值或者修改属性值函数,不是修改样式的，修改样式直接使用css();

如：

html：

div style="width:200px; height:200px;"/div

JQ:

$("div").css("border","1px solid red");

这样就设置了div的边框为1px 实边 红色。

也可以直接设置其边框颜色。如：

$("div").css({"border-color":"red","border-style":"solid"});

Q2: jQuery怎么实现改变div边框和拖动div？

script type="text/javascript"!--

$(document).ready(function()

{

$(".show").mousedown(function(e)//e鼠标事件

{

$(this).css("cursor","move");//改变鼠标指针的形状

var offset = $(this).offset();//DIV在页面的位置

var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离

var y = e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离

$(document).bind("mousemove",function(ev)//绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件

{

$(".show").stop();//加上这个之后

var _x = ev.pageX - x;//获得X轴方向移动的值

var _y = ev.pageY - y;//获得Y轴方向移动的值

$(".show").animate({left:_x+"px",top:_y+"px"},10);

});

});

$(document).mouseup(function()

{

$(".show").css("cursor","default");

$(this).unbind("mousemove");

})

})

// --/script

Q3: jquery怎么设置右边框的颜色？

首先获取元素，然后使用css设置边框颜色即可。

$("#test").css("border-right-color","red");

通过上面的设置，就可以将元素id是test的元素的右边框设置成红色。

Q4: 如何用jQuery实现div边框渐显效果

1 先给div设置一个边框div{border:2px solid #999;}

2 然后设置动画：

$("div").animate({

borderWidth:0,

padding:'2px'},1000)