通过Toggle按钮切换显示Div区块的实现问题求助

问题1：View按钮默认蓝色激活状态 #

原因是你给id为ut1的View按钮默认设置了lbbg类，该类对应蓝色激活样式，所以页面加载后直接显示为激活状态。

问题2：初始加载所有内容Div都显示 #

原因是四个opt内容Div默认没有设置隐藏样式，div标签默认的display属性为block，所以全部内容都会展示出来。

问题3：Delete按钮点击无响应 #

原因是Delete按钮的onclick事件参数存在语法错误，opt1和ut1前缺少单引号，导致JS执行时报错，功能无法正常触发。

CSS代码 #

.greyback {
  background-color: rgb(240, 240, 240) !important;
  color: #000000;
}
.lbbg {
  background-color: rgba(26, 167, 227, 1.00) !important;
  color: #FFFFFF !important;
}
/* 新增内容Div默认隐藏样式，如果你需要默认显示opt1，就把#opt1从下面去掉 */
#opt1, #opt2, #opt3, #opt4 {
  display: none;
}

JS代码 #

原有逻辑无问题，可直接复用：

function showhidetog4(a, b, c, d) {
  document.getElementById(a).style.display = "block";
  document.getElementById(b).style.display = "none";
  document.getElementById(c).style.display = "none";
  document.getElementById(d).style.display = "none";
}

function optbttog3(a, b, c, d) {
  document.getElementById(a).className = "btn btn-sm btn-block lbbg noround padd10";
  document.getElementById(b).className = "btn btn-block btn-sm greyback noround padd10";
  document.getElementById(c).className = "btn btn-block btn-sm greyback noround padd10";
  document.getElementById(d).className = "btn btn-block btn-sm greyback noround padd10";
}

HTML代码 #

主要修改两处：1、如果不需要默认激活View按钮，可将其默认class替换为greyback；2、补全Delete按钮onclick参数缺失的单引号：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-12">
  <div class="row">
    <div class="col-3">
      <!-- 如果需要默认激活View，把class里的greyback改回lbbg即可 -->
      <button id="ut1" class="btn btn-block btn-sm greyback" onclick="showhidetog4('opt1','opt2','opt3','opt4'), optbttog3('ut1','ut2','ut3','ut4')"> View</button>
    </div>
    <div class="col-3">
      <button id="ut2" class="btn btn-block btn-sm greyback" onclick="showhidetog4('opt2','opt1','opt3','opt4'), optbttog3('ut2','ut1','ut3','ut4')">Add</button>
    </div>
    <div class="col-3"> 
      <button id="ut3" class="btn btn-block btn-sm greyback" onclick="showhidetog4('opt3','opt1','opt2','opt4'), optbttog3('ut3','ut1','ut2','ut4')">Modify</button>
    </div>
    <div class="col-3"> 
      <!-- 补全了参数缺失的单引号 -->
      <button id="ut4" class="btn btn-block btn-sm greyback" onclick="showhidetog4('opt4','opt1','opt2','opt3'), optbttog3('ut4','ut1','ut2','ut3')">Delete</button>
    </div>
  </div>
</div>
<div id="opt1">Raj</div>
<div id="opt2">Ashok</div>
<div id="opt3">Manish</div>
<div id="opt4">Trivend</div>

内容的提问来源于stack exchange，提问作者user3181077