导航:首页 > 编程语言 > js定义button

js定义button

发布时间:2024-08-24 17:57:24

js里怎么用button按钮来控制一个div里若干li的选择

先引入jquery,节约代码

css代码

.selected{background-color:#ff0000}

html代码

<buttonid="chooseNext"></button>
<divid="liList">
<liclass="selected">1111111</li>
<li>2222222</li>
<li>3333333</li>
<li>4444444</li>
<li>5555555</li>
<li>6666666</li>
<li>7777777</li>
</div>

js代码

	$(function(){
varlength=$("#liList").children("li").length-1;
$("#chooseNext").on("click",function(){
varsIndex=$("#liList").children("li.selected").index();
if(sIndex==length){
sIndex=-1;
}
$("#liList").children().removeClass("selected");
$("#liList").children("li:eq("+(sIndex+1)+")").addClass("selected");
})
})

完整代码

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
<scriptsrc="js/jquery-1.11.2.min.js"type="text/javascript"charset="utf-8"></script>
</head>
<body>
<styletype="text/css">
.selected{background-color:#ff0000}
</style>
<buttonid="chooseNext">选择下一个</button>
<divid="liList">
<liclass="selected">1111111</li>
<li>2222222</li>
<li>3333333</li>
<li>4444444</li>
<li>5555555</li>
<li>6666666</li>
<li>7777777</li>
</div>
<scripttype="text/javascript">
$(function(){
varlength=$("#liList").children("li").length-1;
$("#chooseNext").on("click",function(){
varsIndex=$("#liList").children("li.selected").index();
if(sIndex==length){
sIndex=-1;
}
$("#liList").children().removeClass("selected");
$("#liList").children("li:eq("+(sIndex+1)+")").addClass("selected");
})
})
</script>


</body>
</html>

② js如何设置动态按钮 就是一个button,有value值,点一下,value的值改变,再点一下,value的值恢复原值!

用jquery的处理方式:

var b = 0;
$("#buttonId").click(function(){
if (b == 0)
{
b = 1;
$("#buttonId").val("确定");
}
else
{
b = 0;
$("#buttonId").val("取消");
}
});

③ 在javascript中怎么设置button的可点击和不可点击

、js中设置按陵则迹钮可点击与不可尺并点击,默认是可点击的

(1)设置按钮不可点击

document.getElementById("bt1").disabled=ture;

(2)设置按钮可点击

document.getElementById("bt1").disabled=false;

2、jq中设置按钮可点击与不可点击,默认是可点击的盯迟

(1)设置按钮不可点击

$("#bt1").attr("disabled",ture);

(1)设置按钮可点击

$("#bt1").attr("disabled",false);

3、标签中设置按钮不可点击

在标签中添加属性disabled="true"。

④ js怎样实现button点击它会被选中,再次点击取消选中

button{
background:#fff;
}
button.active{
background:red;
}

假设上边的css表示button的俩种状态,正常状态和选中状态

<buttontype='button'id="btn">按钮</button>

这个是按钮


varbtn=document.getElementById('btn');
btn.onclick=function(){//添加点击事件
if(btn.className.indexOf('active')){//说明已经是选中状态
btn.className='';//清空class。
}else{
btn.className='active';//否则选中它,给它添加active样式
}
}


//如果用jquery,会很方便实现
$('#btn').click(function(){//给id为btn的元素添加点击事件
$(this).toggleClass('active');//每次点击的时候,将当前的元素切换active样式
//如果有,则去掉,否则添加
});

⑤ JS如何控制button的位置

解决方法:

1、把button定义成绝对定位,position:absoulte的方式,然后设置left,top的方式进行位置控制

2、如果是节点移动,则可以通过dom删除和增加的方式来调整位置

问题解决:

这里针对的是第二种情况,可以把对应的节点获取后,删除再插入到对应的节点后。

代码示例:

<script>
functionmove(self){
varp=self.parentNode;//获取当前节点的父节点
self.remove();//移除当前节点
p.appendChild(self);//父节点添加当前节点
}
</script>
</head>
<body>
<div>
<inputtype="button"id="button1"value="1"onclick="move(this)">
<inputtype="button"id="button2"value="2"/>
</div>
</body>
阅读全文

与js定义button相关的资料

热点内容
win10文件消失容量还在 浏览:203
qq群1000人群会降级吗 浏览:53
陕西省产假158天规定文件在哪里查 浏览:653
在哪个app买车没有费用 浏览:691
win10怎样备份特定文件夹 浏览:623
合理利用网络你会有哪些行动 浏览:131
阿迪t格式文件 浏览:563
数据库模型数据模型 浏览:8
解压文件出现诊断信息 浏览:963
网站设计成本多少钱 浏览:699
姑娘学编程有什么用 浏览:339
谷歌app如何删除 浏览:118
注销微信支付实名 浏览:158
怎样把eps文件转化为ps源文件呢 浏览:767
宜家视频什么网站出来的 浏览:901
电脑微信保持东西不在文件夹 浏览:616
华为nova8pro怎么切换数据 浏览:658
qq怎么传文件到电脑Excel 浏览:927
z3735fwin改安卓 浏览:877
如何将筛选后的数据加填充颜色 浏览:100

友情链接