CSS如何控制背景色点击及切换的效果
<divclass="Q"><ahref="#">1</a><ahref="#">2</a><ahref="#">3</a></div>默认1的背景色为bule,当我选择...
<div class="Q">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>默认1的背景色为bule,当我选择2时，2的背景色变为blue,1的背景色恢复成无背景色，请帮帮手，CSS应该怎么写？ 展开
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>默认1的背景色为bule,当我选择2时，2的背景色变为blue,1的背景色恢复成无背景色，请帮帮手，CSS应该怎么写？ 展开
展开全部
这相当于tab标签效果，纯css不好弄，要用到JS
<div class="Q">
<a id="t1" href="#" onclick="tabs(1)">1</a>
<a id="t2" href="#" onclick="tabs(2)">2</a>
<a id="t3" href="#" onclick="tabs(3)">3</a>
</div>
<script>
function tabs(i){
for(var j=1;j<=3;j++){
if(j==i){
document.getElementById('t'+j).style.backgroundColor = '#0000ff';
}else{
document.getElementById('t'+j).style.background = 'none';
}
}
}
</script>
<div class="Q">
<a id="t1" href="#" onclick="tabs(1)">1</a>
<a id="t2" href="#" onclick="tabs(2)">2</a>
<a id="t3" href="#" onclick="tabs(3)">3</a>
</div>
<script>
function tabs(i){
for(var j=1;j<=3;j++){
if(j==i){
document.getElementById('t'+j).style.backgroundColor = '#0000ff';
}else{
document.getElementById('t'+j).style.background = 'none';
}
}
}
</script>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style type="text/css">
a.current,
a:hover { background-color:blue; }
div.Q:hover { background-color:red; }
div.Q:hover .current { background-color:transparent; }
</style>
<div class="Q">
<a class="current" href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
在chrome,FF测试通过。IE不支持div:hover
完美的解决方案可能还是需要js的协助
a.current,
a:hover { background-color:blue; }
div.Q:hover { background-color:red; }
div.Q:hover .current { background-color:transparent; }
</style>
<div class="Q">
<a class="current" href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
在chrome,FF测试通过。IE不支持div:hover
完美的解决方案可能还是需要js的协助
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
function bg_color(colorname){
document.getElementById("webbg").style.backgroundColor = colorname;
}
</script>
</head>
<body id="webbg">
<input onclick="bg_color('#f00');" type="button" value="红色" />
<input onclick="bg_color('#ccc');" type="button" value="灰色" />
<input onclick="bg_color('#000');" type="button" value="黑色" />
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
function bg_color(colorname){
document.getElementById("webbg").style.backgroundColor = colorname;
}
</script>
</head>
<body id="webbg">
<input onclick="bg_color('#f00');" type="button" value="红色" />
<input onclick="bg_color('#ccc');" type="button" value="灰色" />
<input onclick="bg_color('#000');" type="button" value="黑色" />
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
点击还是到达，我看你那是链接，一定是到达了吧？是的话我贴代码
更多追问追答
追问
是的，也就是选择翻页后的背景色式样。
追答
到达可以直接用a:hover方法不用他们写的那么麻烦
.Q a{ width:100px; height:20px; display:block; background:#000; color:#fff; line-height:20px;}
.Q a:hover{ width:100px; height:20px; display:block; background:#f90; color:#f00; line-height:20px;}
1
2
3
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
