我有一个由4个div框组成的菜单。我希望活动框具有红色边框,如果单击另一个框,则边框为白色,另一个框的边框为红色。我需要JavaScript还是CSS?
HTML
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
CSS
.box{
margin: 10px;
float: left;
width: 100px;
height: 50px;
background-color: blue;
border: solid 1px red;
}
答案 0 :(得分:6)
如果你想维持状态,你需要JavaScript,你可以使用CSS。
您可以使用div:active { /* style */ }
进行点击并按住风格,但鼠标操作后它会消失。
这是使用jQuery快速完成的方法:
$('.box').on('click', function(e){
e.preventDefault();
$(this).css('border-color', 'lime');
});
可能更好地切换课程:
JS:
$('.box').on('click', function(e){
e.preventDefault();
$(this).toggleClass('myClickState');
});
CSS:
.myClickState {
border-color: lime;
}
答案 1 :(得分:1)
是的,您可以使用:active
伪选择器来实现此目的。
试试这个:
.box:active {
border-color: red;
}
但是,释放鼠标后,这种情况不会持续存在。
IE6也不支持。
答案 2 :(得分:1)
function fnChangeBorder(boxId)
{document.getElementById(boxId).style.border = "solid #AA00FF";}
&#13;
<div class="box" id="A" onclick="fnChangeBorder('A')">Click here !!</div>
&#13;
我选择A作为参数,因为数字不能作为函数参数
答案 3 :(得分:0)
答案 4 :(得分:0)
您可以通过jQuery(JSFiddle here)执行此操作:
$(document).ready(function() {
$('.box').click(function() {
if($('.active').length) {
$('.active').not($(this)).removeClass('active').addClass('box');
}
$(this).removeClass('box').addClass('active');
});
});
答案 5 :(得分:0)
尝试一下:
.box:focus{ border-color:#cd3232; }