JS在点击一个div时应用自定义样式并从另一个div中删除样式
发布于2023-05-29 21:19 阅读(1028) 评论(0) 点赞(24) 收藏(4)
我有 2 个宽度为 50% 的切换按钮，单击它会显示一个低于 100% 的 div 并隐藏另一个，反之亦然。
使这成为可能的功能工作正常，但我想要做的是在显示的切换上添加自定义样式
这是最后的样子： div 自动显示，自定义样式边框为黑色，底部宽度较粗，文本颜色为黑色
这是现在的样子：这是我在不开放时想要的样式，但我想像我说的那样更改边框和颜色样式
`
function switch_div(show) {
document.getElementById("show_"+show).style.display="block";
document.getElementById("show_"+((show==1)?2:1)).style.display = "none";
}
function stylish(){
document.getElementById("borderRight").setAttribute(
"style", "color:#000000;border:1px solid black;border-bottom:5px solid black;");
document.getElementById("buttonRight").style.color = "#000000";
}
function stylish2(){
document.getElementById("borderLeft").setAttribute(
"style", "color:#000000;border:1px solid black;border-bottom:5px solid black;");
document.getElementById("buttonLeft").style.color = "#000000";
}.content {
width: 100%;
height: 100px;
display: block;
background-color:#fafafa;
margin-top:3%;
}
.hide {
display: none;
}
.align1{
display:inline-block;
width:49%;
height:50px;
text-align:center;
border:1px solid #c3c6c6;
cursor:pointer;
}
#borderRight{
border-right:0px;
}
.titres{
font-family:Roboto;
font-size:20px;
background-color:transparent;
border:0px;
padding-top:2.3%;
font-weight:700;
color:#a2a2a4;
text-transform:uppercase;
font-size:20px;
letter-spacing:1.5px;
cursor:pointer;
}
.titres:hover{
color:#000000;
}<div id="borderRight" class="align1" onclick="switch_div(1);">
<button id="buttonRight" class="titres" onclick="stylish()">Description</button>
</div><div id="borderLeft"class="align1"onclick="switch_div(2);"><button id="buttonLeft" class="titres" onclick="stylish2()">
Additional information</button>
</div>
<div class="content" id="show_1">
Show by default (and when button 1 is clicked)
</div>
<div class="content hide" id="show_2">
Div number 2
</div>`
感谢您的帮助 ！
解决方案
希望这可以帮助：
document.addEventListener("DOMContentLoaded", function() {
stylish();
});
function switch_div(show) {
document.getElementById("show_"+show).style.display="block";
document.getElementById("show_"+((show==1)?2:1)).style.display = "none";
}
function stylish(){
document.getElementById("borderLeft").removeAttribute('style');
document.getElementById("borderRight").setAttribute(
"style", "color:#000000;border:1px solid black;border-bottom:5px solid black;");
document.getElementById("buttonRight").style.color = "#000000";
}
function stylish2(){
document.getElementById("borderRight").removeAttribute('style');
document.getElementById("borderLeft").setAttribute(
"style", "color:#000000;border:1px solid black;border-bottom:5px solid black;");
document.getElementById("buttonLeft").style.color = "#000000";
}.content {
width: 100%;
height: 100px;
display: block;
background-color:#fafafa;
margin-top:3%;
}
.hide {
display: none;
}
.align1{
display:inline-block;
width:49%;
height:50px;
text-align:center;
border:1px solid #c3c6c6;
cursor:pointer;
}
#borderRight{
border-right:0px;
}
.titres{
font-family:Roboto;
font-size:20px;
background-color:transparent;
border:0px;
padding-top:2.3%;
font-weight:700;
color:#a2a2a4;
text-transform:uppercase;
font-size:20px;
letter-spacing:1.5px;
cursor:pointer;
}
.titres:hover{
color:#000000;
}<div id="borderRight" class="align1" onclick="switch_div(1);">
<button id="buttonRight" class="titres" onclick="stylish()">Description</button>
</div><div id="borderLeft"class="align1"onclick="switch_div(2);"><button id="buttonLeft" class="titres" onclick="stylish2()">
Additional information</button>
</div>
<div class="content" id="show_1">
Show by default (and when button 1 is clicked)
</div>
<div class="content hide" id="show_2">
Div number 2
</div>所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/528438/cfe5ce4e244bfcb67aca/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力