Question

根据我选择的选项，我遇到了打开标签的问题。在摘录中，您将看到4个框。如果您单击框1，我希望#marketing1在其下面打开，依此类推。

我使用的方法是获取按钮选择的特定id（1,2,3,4框），然后声明一个变量来获取数字。然后将该数字添加到#marketing的ID以显示相应的部分。我不确定我做错了什么。没有错误显示。

Ps - 我还尝试将.active类添加到#marketing-service，以便在单击其中一个选择框时显示我的活动类（它会在框下方创建一个向下箭头）我是否对.active和:before？

实施了:after错误

＆＃13;

//For tabs to stay active
	$('.marketing-service').click(function() {
		$('.marketing-service.active').removeClass('active');
		$(this).toggleClass('active');
		
		//To get the service display box to show
		var item_number = $(this).attr('id').replace('marketing-tab', '');
		/* $('html, body').animate({
		scrollTop: $("#service-display-box").offset().top
	  }, 1500);*/
		$('#marketing'+item_number).show().siblings('.marketing-section-wrap').hide();
	});

＆＃13;

.marketing-section-wrap, .marketing-section-wrap-main {
	width: 100%;
	height: auto;
	padding: 80px 0;
	border-bottom: 1px solid #EBEBEB;
}
.marketing-section-wrap {
	display: none;
}
#marketing-services {
	width: 95%;
	margin: 0 2.5%;
}
.marketing-service {
	display: inline-block;
	width: 22%;
	margin: 0 1%;
	height: 400px;
	background: #F0F0F0;
	position: relative;
	cursor: pointer;
}
.marketing-service:first-child {
	margin-left: 0;
}
.marketing-service:last-child {
	margin-right: 0;
}
.marketing-service:hover {
	background: rgba(0, 255, 170, .4);
	z-index: 1;
}
/*-- Down Arrow for boxes --*/
.marketing-service:after.active, .marketing-service:before.active {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
}
.marketing-service:after.active {
	border-width: 0px;
	margin-left: 0px;
	border-color: rgba(136, 183, 213, 0);
	border-right-color: #88b7d5;
	margin-top: -30px;
}
.marketing-service:before.active {
	border-color: #FFF;
	border-top-color: #88b7d5;
	border-width: 36px;
	margin-left: -36px;
	margin-top: 0;
}
.marketing-service-wrap {
	padding: 10%;
	width: 80%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="marketing-services">
  <div class="marketing-service" id="marketing-tab1">
    <div class="marketing-service-wrap total-center">
      <h2 class="marketing-service-title">1</h2>

    </div>
  </div>
  <div class="marketing-service" id="marketing-tab2">
    <div class="marketing-service-wrap total-center">
      <h2 class="marketing-service-title">2</h2>

    </div>
  </div>
  <div class="marketing-service" id="marketing-tab3">
    <div class="marketing-service-wrap total-center">
      <h2 class="marketing-service-title">3</h2>

    </div>
  </div>
  <div class="marketing-service" id="marketing-tab4">
    <div class="marketing-service-wrap total-center">
      <h2 class="marketing-service-title">4</h2>

    </div>
  </div>
</div>
<div id="marketing1">
  <div class="marketing-section-wrap">
    1
  </div>
</div>
<div id="marketing2">
  <div class="marketing-section-wrap">
    2
  </div>
</div>

＆＃13;

Answer 1

非常简单，只需尝试$('#marketing'+item_number).children().show()，因为marketing-section-wrap是display:none;

首先运行此命令以隐藏所有marketing-section-wrap

$('.marketing-section-wrap').hide();

然后这将只显示与此次点击相对应的那个。

$('#marketing'+item_number).children().show();

显示所选ID的问题

1 个答案: