关于HTML / CSS / jQuery的一些示例和教程，我设法创建了几个按钮，这些按钮将根据按下的按钮切换一些内容。我相信通过索引元素标识符或类似的想法，可以更有效/更有效地编写以下代码。由于我的jQuery缺乏经验，欢迎任何建议。
我特意寻找使用jQuery（和Bootstrap）的改进。
$(document).ready(function() {
$("#button1").click(function() {
$("#div1").show();
$("#div2").hide();
$("#div3").hide();
$("#div4").hide();
});
$("#button2").click(function() {
$("#div1").hide();
$("#div2").show();
$("#div3").hide();
$("#div4").hide();
});
$("#button3").click(function() {
$("#div1").hide();
$("#div2").hide();
$("#div3").show();
$("#div4").hide();
});
$("#button4").click(function() {
$("#div1").hide();
$("#div2").hide();
$("#div3").hide();
$("#div4").show();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<h2>Button group</h2>
<div class="btn-group">
<button id="button1" type="button" class="btn btn-primary">Div 1</button>
<button id="button2" type="button" class="btn btn-primary">Div 2</button>
<button id="button3" type="button" class="btn btn-primary">Div 3</button>
<button id="button4" type="button" class="btn btn-primary">Div 4</button>
</div>
<div class="div-group">
<div id="div1" style="background-color: red;">div 1</div>
<div id="div2" style="background-color: blue;">div 2</div>
<div id="div3" style="background-color: red;">div 3</div>
<div id="div4" style="background-color: blue;">div 4</div>
</div>
</div>
答案 0 :(得分：2)
您可以使用点击index()的{{1}} + 1来选择具有相同索引的button的div，并隐藏其兄弟姐妹。
id$('.btn-group button').click(function() {
$('.div-group #div' + ($(this).index() + 1)).show().siblings().hide()
})
答案 1 :(得分：1)
您可以尝试使用多个选择器，这会减少代码的大小
$("#button1").click(function(){
$("#div1").show();
$("#div2, #div3, #div4").hide();
});
此处有关多个选择器的更多信息： https://www.w3schools.com/jquery/sel_multiple_sel.asp
答案 2 :(得分：1)
虽然你可以减少表达式，但我没有看到不这样做。无论如何，如果您决定使用像JQuery-ui这样的库，您可以通过直接作为documentation显示的html元素ID来执行此操作。我觉得这就是你要找的东西。
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#tabs" ).tabs();
} );
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
</body>
答案 3 :(得分：1)
您可以将此全部放入一个.click()函数中。提供这是您的HTML：
<div class="container">
<h2>Button group</h2>
<div class="btn-group">
<button class="button btn btn-primary">Div 1</button>
<button class="button btn btn-primary">Div 2</button>
<button class="button btn btn-primary">Div 3</button>
<button class="button btn btn-primary">Div 4</button>
</div>
<div class="div-box">
<div class="box" style="background-color: red;">div 1</div>
<div class="box" style="background-color: blue;">div 2</div>
<div class="box" style="background-color: grey;">div 3</div>
<div class="box" style="background-color: green;">div 4</div>
</div>
</div>
您可以使用以下jQuery函数切换hide / show：
//Detects clicks on elements with the class button
$('.button').click(function() {
//Gets the nth position of button clicked
var index = $(this).index() + 1;
//Shows the div with the same nth position as the button and hiding all other divs
$('.div-box div:nth-of-type('+index+')').show().siblings().hide();
});
$('.button').click(function() {
var index = $(this).index() + 1;
$('.div-box div:nth-of-type('+index+')').show().siblings().hide();
});.box {
display: none;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<h2>Button group</h2>
<div class="btn-group">
<button class="button btn btn-primary">Div 1</button>
<button class="button btn btn-primary">Div 2</button>
<button class="button btn btn-primary">Div 3</button>
<button class="button btn btn-primary">Div 4</button>
</div>
<div class="div-box">
<div class="box" style="background-color: red;">div 1</div>
<div class="box" style="background-color: blue;">div 2</div>
<div class="box" style="background-color: grey;">div 3</div>
<div class="box" style="background-color: green;">div 4</div>
</div>
</div>
答案 4 :(得分：1)
您可以使用if语句，该语句取决于单击的id与具有多个单击事件的ID。这是fiddle /示例：
$(document).ready(function() {
$('button').click(function() {
if (this.id == 'button1') {
$("#div1").show();
$("#div2").hide();
$("#div3").hide();
$("#div4").hide();
} else if (this.id == 'button2') {
$("#div1").hide();
$("#div2").show();
$("#div3").hide();
$("#div4").hide();
} else if (this.id == 'button3') {
$("#div1").hide();
$("#div2").hide();
$("#div3").show();
$("#div4").hide();
} else if (this.id == 'button4') {
$("#div1").hide();
$("#div2").hide();
$("#div3").hide();
$("#div4").show();
}
})
});
答案 5 :(得分：1)
你可以将按钮的data-rel元素放入要显示的DIV的id，然后使用Jquery点击它。
$(".btn-primary").click(function(e) {
e.preventDefault();
$('.div-group div').hide();
$('#' + $(this).data('rel')).toggle();});
我设置了一个小提琴：https://jsfiddle.net/apm27tbg/1/
答案 6 :(得分：0)
只需为每个按钮指定一个唯一ID，并将相同的ID提供给相关标签。
单击按钮时，隐藏所有选项卡，并显示具有相同ID的选项卡。
$(document).ready(function() {
$("ul a").click(function() {
var thisId = $(this).attr("id") ; //Get id of the clicked tab
$("ul a").removeClass("active") ; //Remove selection from all tabs
$(".tab").removeClass("active") ; //Hide all contents
$(this).addClass("active") ; //Add selection to the clicked tab
$(".tab[id='" + thisId + "']").addClass("active") ; //Show content related to the clicked tab
}) ;
$("ul").find("li").first().find("a").trigger("click") ; //Show the content of the first tab on page load
}) ;.clear{
display: block;
clear: both;
}
ul{
list-style: none;
display: block;
}
li{
float: left;
margin-right: 10px;
}
a{
text-decoration: none;
}
a.active{
color: #ff2525;
}
.tabs{
margin-top: 30px;
display: block;
}
.tabs .tab {
display:none;
}
.tabs .tab.active{
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="javascript:;" id="tab1">Tab 1</a></li>
<li><a href="javascript:;" id="tab2">Tab 2</a></li>
<li><a href="javascript:;" id="tab3">Tab 3</a></li>
<li><a href="javascript:;" id="tab4">Tab 4</a></li>
<ul>
<div class="clear"></div>
<div class="tabs">
<div class="tab" id="tab1">This is Tab 1</div>
<div class="tab" id="tab2">This is Tab 2</div>
<div class="tab" id="tab3">This is Tab 3</div>
<div class="tab" id="tab4">This is Tab 4</div>
</div>
答案 7 :(得分：0)
使用index()，eq()并将所有方法链接在一起
$('.btn-group button').click(function(){
var idx = $(this).index();
// hide all the div then show the corresponding indexed one
$('.div-group div').hide().eq(idx).show()
}).div-group >div{display:none}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<h2>Button group</h2>
<div class="btn-group">
<button id="button1" type="button" class="btn btn-primary">Div 1</button>
<button id="button2" type="button" class="btn btn-primary">Div 2</button>
<button id="button3" type="button" class="btn btn-primary">Div 3</button>
<button id="button4" type="button" class="btn btn-primary">Div 4</button>
</div>
<div class="div-group">
<div id="div1" style="background-color: red;">div 1</div>
<div id="div2" style="background-color: blue;">div 2</div>
<div id="div3" style="background-color: red;">div 3</div>
<div id="div4" style="background-color: blue;">div 4</div>
</div>
</div>