程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

JS在点击一个div时应用自定义样式并从另一个div中删除样式

发布于2023-05-29 21:19     阅读(880)     评论(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/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

24 0
收藏该文
已收藏

评论内容:(最多支持255个字符)