项目笔记:点击按钮后使其保持点击时的状态
来源:互联网 发布:网络故障诊断工具 编辑:程序博客网 时间:2024/05/01 12:25
在Web开发时,有不少选项卡切换的实例,当点击一个选项卡时要使其一直保持点击时的状态,直到点击下一个选项卡切换到另一个选项卡才改变按钮颜色,之前在项目中有遇到这样的问题,现在将几种方法做一总结。
多个选项卡切换
1.使用原生JS切换style
给每一个按钮添加一个点击事件,每个按钮传入函数的参数不一样,JS中利用传入的参数判断是哪个按钮发生点击事件,然后改变按钮的style
<script type="text/javascript">
function buttonclick(t){
if(t==1){
document.getElementById("b1").style.background="#ff0000";
document.getElementById("b2").style.background="#ffffff";
}
if(t==2){
document.getElementById("b2").style.background="#ff0000";
document.getElementById("b1").style.background="#ffffff";
}
}
</script>
<body>
<div class="main">
<button id="b1" onclick="buttonclick(1)">button1</button>
<button id="b2" onclick="buttonclick(2)">button2</button>
</div>
</body>
但是这种方法对于选项卡较多的不适用,代码太复杂,不推荐使用
2.JQuery取消当前选项卡的mouseout()和mouseover()事件
首先init()函数初始化button,并且注册按钮点击事件。当有按钮点击时首先初始化所有按钮,然后改变被点击按钮的css,因为click事件触发的同时会触发mouseover()和mouseout()事件,以至于当按钮点击后不能保持点击时的状态,所以在点击函数中取消被点击按钮的mouseover()和mouseout()事件,这样就可以达到效果。
<script type="text/javascript">
$(function () {
var init = function () {
$(".main button").css("background", "");
$(".main button").mouseover(function () {
$(this).css("background", "#ff0000");
})
.mouseout(function () {
$(this).css("background", "");
})
};
init();
$(".main button")
.click(function () {
init();
$(this).css("background", "#ff0000");
$(this).unbind("mouseout");
$(this).unbind("mouseover");
});
})
</script>
<div class="main">
<button>button1</button>
<button>button2</button>
<button>button3</button>
</div>
</body>
在做这种方法的时候有考虑到是不是可以不用取消mouseover()和mouseout()事件,改变按钮的disabled,但是这样的话按钮就会被禁用,不能达到指定的style。
3.setTable鼠标悬浮/点击切换
为一组选项卡编号,setTab(id,cursel,n)函数切换选项卡的class,id为被点击选项卡的id,cursel为选项卡的编号,n为选项卡总数
<script type="text/javascript">
function setTab(name,cur,n)
{
for(i=1;i<=n;i++)
{
var menu=document.getElementById(name+i);
menu.className=i==cur?"click":"";
}
}
</script>
<style type="text/css">
.click{
background-color: #ff0000;
}
</style>
<body>
<div class="main">
<button id="b1" onclick="setTab('b',1,3)">button1</button>
<button id="b2" onclick="setTab('b',2,3)">button2</button>
<button id="b3" onclick="setTab('b',3,3)">button3</button>
</div>
</body>
单个选项卡点击切换style
一个选项卡的切换不像一组选项卡切换那样有参照物,所以得设置一个标记记录选项卡的状态
<script>
var t=false; //t记录当前按钮的状态
function buttonclick(){
if(t==false)
{
document.getElementById("b1").className="bb1";
t=true;
}
else{
document.getElementById("b1").className="";
t=false;
}
}
</script>
<style type="text/css">
.bb1{
background-color: #ff0000;
}
</style>
<body>
<div class="managementPanel">
<button id="b1" onclick="buttonclick()">div1</button>
</div>
</body>
- 项目笔记:点击按钮后使其保持点击时的状态
- 设置按钮点击后一直保持被点击时的状态
- 开发日志:使超链接点击一次后失效,让其达到类似按钮disabled的效果
- TreeView点击之后保持点击节点的方法 (展开后刷新仍保持展开状态的方法)
- button按钮的点击状态
- iOS点击“我的”,保持登陆状态
- 点击一个按钮使其下面的主题背景变色
- MFC点击对话框的X按钮使其最小化
- Android 编程笔记 select的使用,Button的三种状态(未点击,点击,选中保持状态)
- TableView 点击项目后恢复原来状态
- 按钮点击状态
- 点击提交按钮后按钮变灰色不可用状态的三种方法
- toolstripbutton 动态添加后 获取当前点击的按钮的值 并且将其删除
- android点击AlertDialog上的按钮后让其不消失
- 点击按钮改变textField的状态
- 点击后按钮消失
- Android分享按钮点击后的事件
- 点击按钮后弹出新的对话框
- 解决 Windows instance 时间不同步问题
- 编程极简入门(python)-03-第一个python程序
- POJ1860 Currency Exchange(正权环,folyd)
- Handler使用方法总结
- glitch断言
- 项目笔记:点击按钮后使其保持点击时的状态
- 模板引擎
- 操作系统是如何工作的
- Java基盘环境搭建
- RealFlow在线教程翻译(11)——SPH
- c++第二次作业-3定期存款利息计算器
- NHibernate+FluentNHibernate+MySql 运行报错问题
- c++第二次实验:输出完数
- Spring AOP 实现原理