我在页面上创建了一行四个标题，下面是每个标题的说明。我希望它首先突出显示第一个标题，仅限第一个描述。单击每个标题时，描述会更改（幻灯片）以匹配）。基本上是一个滑块，而不是箭头 - 标题。实现这一目标的最佳/最简单方法是什么？感谢。
.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>
答案 0 :(得分：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>
请注意，互联网上有数百万种解决方案，请考虑使用其中一种解决方案。我认为你要找的是标签：