重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
思路:为添加边框样式设置一个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、效果演示
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"});
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
首先获取元素,然后使用css设置边框颜色即可。
$("#test").css("border-right-color","red");
通过上面的设置,就可以将元素id是test的元素的右边框设置成红色。
1 先给div设置一个边框div{border:2px solid #999;}
2 然后设置动画:
$("div").animate({
borderWidth:0,
padding:'2px'},1000)