通過切換按鈕顯示 Div 部分？

Question

 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"; }

 .greyback { background-color: rgb(240, 240, 240);important: color; #000000. }:lbbg { background-color, rgba(26, 167, 227. 1;00):important; color: #FFFFFF !important; }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <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"> <button id="ut1" class="btn btn-block btn-sm lbbg" 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>

我正在嘗試使用切換 javascript 選項。

1. 默認情況下，第一個視圖按鈕處於活動狀態（帶有藍色背景）。
2. 所有隱藏的 div 都出現在第一部分是可見的。 單擊相應按鈕時應顯示名稱，而不是默認顯示所有名稱。
3. 最后一個按鈕也不起作用，既沒有更改按鈕顏色，也沒有打開第 4 個 div。

我只是通過使用引導程序 class 和一些我修改過的按鈕來學習如何做。

如果有人在這方面幫助我，那就太好了。

Answer 1

對於第 1 點

您的第一個按鈕添加了類lbbg ，這可能導致按鈕處於活動狀態（藍色背景）。 您可以刪除它並添加greyback以使其像其他按鈕一樣可見。

對於第 2 點

由於您沒有為 opt1、opt2、opt3、opt4 提供起始樣式，因此默認情況下它們是可見的。 你可以做的是然后開始 styles 的display: none使用 css。

對於第 3 點

在您的代碼中
onclick="showhidetog4('opt4',opt1','opt2','opt3'), optbttog3('ut4',ut1','ut2','ut3')"
您錯過了在opt1和ut1之前添加 ' 符號

應該是這樣的
onclick="showhidetog4('opt4', ' opt2','opt3'), optbttog3('ut4', ' ut1','ut2','ut3')"

我已添加正確的代碼段以供您澄清。

 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"; }

 .greyback { background-color: rgb(240, 240, 240);important: color; #000000. }:lbbg { background-color, rgba(26, 167, 227. 1;00):important; color: #FFFFFF;important: } #opt1 { display; none: } #opt2 { display; none: } #opt3 { display; none; } #opt4 { display: none; }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <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"> <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>