如何使用标题而不是箭头创建滑块

Question

我在页面上创建了一行四个标题，每个标题在下面都有说明。我希望它从突出显示的第一个标题和仅第一个描述开始。单击每个标题时，描述会更改（幻灯片）以匹配）。基本上是一个滑块，而不是箭头——标题。实现这一目标的最佳/最简单方法是什么？谢谢。

.facilities {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 0 30px 0;
  max-height: 40px;
}

.facilities .heading {
  flex: 0 0 25%;
}

ul.facility-descriptions {
  font-family: 'Montserrat',"Helvetica-Neue",Helvetica,Arial,sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 30px;
  padding: 0;
  margin: 0;
}

ul.facility-descriptions li {
  list-style: none;
}

<div class="facilities">
  <div class="heading"><p>FACILITIES MANAGEMENT</p></div>
  <div class="heading"><p>CATERING SERVICES</p></div>
  <div class="heading"><p>CLEANING SERVICES</p></div>
  <div class="heading"><p>CAMP RELOCATIONS</p></div>
</div>
<ul class="facility-descriptions">
  <li>We are responsible for the effective management of on-site accommodation on behalf of our clients. Our specialist staff in camp management and catering have a wealth of experience and proven record of accomplishment in this industry. Our services are supported with safe documented systems of work and are environmentally sustainable.</li>
  <li>Our menus aim to provide a wide choice for clients and residents whilst providing the necessary nutritional balance to support an individual's daily requirements. When compiling our menus, we consult widely and create recipes that take into consideration dietary guidelines to promote healthy living.</li>
  <li>We address all cleaning requirements on-site including detailed cleaning of specialised areas. We ensure that all camp quarters, rooms, and ablutions are maintained to an optimum hygienic condition. Services include daily cleaning, bed making, washing of guest's apparels, bed linen changed weekly and on departure of guests or when specifically requested, and twice daily cleaning of ablutions.</li>
  <li>The synergies associated with our transport and logistics activities enable us to bring added value to our clients when it comes to mobilisation, relocation or demobilisation of remote camp facilities. We operate a fleet of prime movers, winch trucks, specialised trailers, forklifts and all terrain mobile cranes complemented by a professional team of multi-skilled, experienced operators. This allows us to relocate camps in geographically diverse fields across a variety of remote locations.</li>
</ul>

Answer 1

一个简单的方法是 JavaScript（从这里开始：http://www.w3schools.com/js）。我添加了jQuery，因为它让 JS 的生活变得更加轻松。

如果您的解决方案是基于索引的（第一个标题显示第一个描述），这可能是一个简单的解决方案：

var headerList = $(".heading");
var descList = $(".facility-descriptions li");
var index = 0;

headerList.click(function(){
  $(descList[index]).hide();
  index = headerList.index($(this));
  $(descList[index]).show();
});

.facilities {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 0 30px 0;
  max-height: 40px;
}

.facilities .heading {
  flex: 0 0 25%;
  cursor: pointer;
}

ul.facility-descriptions {
  font-family: 'Montserrat',"Helvetica-Neue",Helvetica,Arial,sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 30px;
  padding: 0;
  margin: 0;
}

ul.facility-descriptions li {
  list-style: none;
  display: none;
}

ul.facility-descriptions li:first-child {
  display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="facilities">
  <div class="heading"><p>FACILITIES MANAGEMENT</p></div>
  <div class="heading"><p>CATERING SERVICES</p></div>
  <div class="heading"><p>CLEANING SERVICES</p></div>
  <div class="heading"><p>CAMP RELOCATIONS</p></div>
</div>
<ul class="facility-descriptions">
  <li>We are responsible for the effective management of on-site accommodation on behalf of our clients. Our specialist staff in camp management and catering have a wealth of experience and proven record of accomplishment in this industry. Our services are supported with safe documented systems of work and are environmentally sustainable.</li>
  <li>Our menus aim to provide a wide choice for clients and residents whilst providing the necessary nutritional balance to support an individual's daily requirements. When compiling our menus, we consult widely and create recipes that take into consideration dietary guidelines to promote healthy living.</li>
  <li>We address all cleaning requirements on-site including detailed cleaning of specialised areas. We ensure that all camp quarters, rooms, and ablutions are maintained to an optimum hygienic condition. Services include daily cleaning, bed making, washing of guest's apparels, bed linen changed weekly and on departure of guests or when specifically requested, and twice daily cleaning of ablutions.</li>
  <li>The synergies associated with our transport and logistics activities enable us to bring added value to our clients when it comes to mobilisation, relocation or demobilisation of remote camp facilities. We operate a fleet of prime movers, winch trucks, specialised trailers, forklifts and all terrain mobile cranes complemented by a professional team of multi-skilled, experienced operators. This allows us to relocate camps in geographically diverse fields across a variety of remote locations.</li>
</ul>

请注意，互联网上有数百万种解决方案，请考虑使用其中一种。我认为您正在寻找的是标签：

• http://www.w3schools.com/howto/howto_js_tabs.asp
• http://callmenick.com/post/simple-responsive-tabs-javascript-css
• https://jqueryui.com/tabs/