javascript - 让显示隐藏功能正常工作的问题

Question

我有三个标题作为按钮。按钮 1、2 和 3。在页面加载时，我希望显示按钮 1 部分，但是如果有人单击按钮 2 或 3 以隐藏前一个按钮描述并让新按钮出现在其位置。

到目前为止，我无法让它工作。我将 display: none; 添加到通用类中，但正如我所说，我希望第一个在页面加载时显示。

我做错了什么？

$('#big-three-names').click(function() {
	  var thisDescription = $('.big-three-info', $(this));
	  $('.big-three-info').not(thisDescription).hide().parent().removeClass('closed');
	  thisDescription.slideToggle(500).parent().toggleClass('closed');
	});

.big-three {
	margin: 75px 7.5% 25px 7.5%;
	height: 900px;
	border: 1px solid black;
}
#big-three-title {
	text-align: center;
	font-size: 1.6em;
	padding: 50px 0 30px 0;
}
#big-three-description {
	text-align: center;
	font-size: 1.3em;
}
#big-three-names-out {
	width: 100%;
	height: 75px;
	margin: 50px 0;
}
.big-three-names {
	display: inline-block;
	border: 2px solid #FFF;
	width: 33.05%;
	height: 100%;
	text-align: center;
	font-size: 1.5em;
	font-weight: bold;
	background-color: #000;
	color: #FFF;
	cursor: pointer;
}
.big-three-names:hover {
	background-color: blue;
	color: #FFF;
}
.big-three-info {
	margin: 50px 20%;
	border: 1px solid black;
	height: 550px;
  display: none;
}
#big-three-info-title { 
	width: 100%;
	margin: 100px 0 25px 50px;
	font-size: 1.2em;
}
#big-three-info-description { 
	width: 100%;
	margin-left: 50px;
	font-size: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<div class="big-three-out">
		<div class="big-three">
			<div id="big-three-title">The "Big Three"</div>
			<div id="big-three-description">fdmsnfdnofnkosjafnndsa.</div>
			<div id="big-three-names-out">
				<div class="big-three-names">1</div><div class="big-three-names">2</div><div class="big-three-names">3</div>
				<div class="big-three-info">
					<div id="big-three-info-title">
						1
					</div>
					<div id="big-three-info-description">
						Description for 1.
					</div>
				</div>
        <div class="big-three-info">
					<div id="big-three-info-title">
						2
					</div>
					<div id="big-three-info-description">
						Description for 2.
					</div>
				</div>
        <div class="big-three-info">
					<div id="big-three-info-title">
						3
					</div>
					<div id="big-three-info-description">
						Description for 3.
					</div>
				</div>
			</div>
		</div>
	</div>

Answer 1

您可以使用 JQuery 执行以下操作。使用 JQuery 的 .eq() 获取所选按钮的 html 文本并显示 div。

首先在页面加载时使用 $('.big-three-info').eq(0).css("display", "block"); 显示。

$('.big-three-names').click(function() {
    var i = $( this ).html();
    $('.big-three-info').css("display", "none")
    $('.big-three-info').eq(i-1).css("display", "block");
  });

$('.big-three-info').eq(0).css("display", "block");

.big-three {
	margin: 75px 7.5% 25px 7.5%;
	height: 900px;
	border: 1px solid black;
}
#big-three-title {
	text-align: center;
	font-size: 1.6em;
	padding: 50px 0 30px 0;
}
#big-three-description {
	text-align: center;
	font-size: 1.3em;
}
#big-three-names-out {
	width: 100%;
	height: 75px;
	margin: 50px 0;
}
.big-three-names {
	display: inline-block;
	border: 2px solid #FFF;
	width: 33.05%;
	height: 100%;
	text-align: center;
	font-size: 1.5em;
	font-weight: bold;
	background-color: #000;
	color: #FFF;
	cursor: pointer;
}
.big-three-names:hover {
	background-color: blue;
	color: #FFF;
}
.big-three-info {
	margin: 50px 20%;
	border: 1px solid black;
	height: 550px;
  display: none;
}
#big-three-info-title { 
	width: 100%;
	margin: 100px 0 25px 50px;
	font-size: 1.2em;
}
#big-three-info-description { 
	width: 100%;
	margin-left: 50px;
	font-size: 1em;
}
.show{
  display:block;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<div class="big-three-out">
		<div class="big-three">
			<div id="big-three-title">The "Big Three"</div>
			<div id="big-three-description">fdmsnfdnofnkosjafnndsa.</div>
			<div id="big-three-names-out">
				<div class="big-three-names">1</div><div class="big-three-names">2</div><div class="big-three-names">3</div>
				<div class="big-three-info">
					<div id="big-three-info-title">
						1
					</div>
					<div id="big-three-info-description">
						Description for 1.
					</div>
				</div>
        <div class="big-three-info">
					<div id="big-three-info-title">
						2
					</div>
					<div id="big-three-info-description">
						Description for 2.
					</div>
				</div>
        <div class="big-three-info">
					<div id="big-three-info-title">
						3
					</div>
					<div id="big-three-info-description">
						Description for 3.
					</div>
				</div>
			</div>
		</div>
	</div>