网站建设资讯

NEWS

网站建设资讯

jquery边框,jquery设置边框样式

如何用jquery给li加边框

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

成都创新互联专注于企业营销型网站、网站重做改版、中原网站定制设计、自适应品牌网站建设、HTML5建站商城建设、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为中原等各大城市提供网站开发制作服务。

实例演示如下:

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、效果演示

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"});

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

jquery怎么设置右边框的颜色?

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

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

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

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

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

2 然后设置动画:

$("div").animate({

borderWidth:0,

padding:'2px'},1000)


标题名称:jquery边框,jquery设置边框样式
网页地址:http://cdweb.net/article/dsipois.html