如何将所选标题及其内容设为有效，将其他内容设为无效？
我正在为教育机构建立一个网站，其中有分区学校作为matric，cbse和州委员会以及一所大学。我需要的是当我们点击预科流时，基础学校需要处于活跃状态，对其他溪流（cbse，stateboard和college）也很明智。现在我已经给了药丸，并提到里面的每个机构都有标题作为药片..
我尝试过的HTML，
<section class="ourscl" id="school">
<div class="container">
<div class="text-center">
<h2 class="hdng"><span class="schools-title">Our Schools</span></h2>
<h4 class="italic-line"> 100+ schools with world class education </h4>
<div class="plus_image"><img class="repeat_image"></div>
<ul class="nav nav-pills nav-justified navbar-default" style="color:white;margin-top:30px;margin-bottom:30px">
<li class="active brdrlft tab-wid font-sz"><a href="#mtrcscl1" data-toggle="pill">Matriculation Stream</a></li>
<li class="brdrlft tab-wid font-sz"><a data-toggle="pill" href="#cbse">CBSE Stream</a></li>
<li class="brdrlft tab-wid font-sz"><a data-toggle="pill" href="#hgrscl">State Board</a></li>
<li class="tab-wid font-sz"><a data-toggle="pill" href="#clg">B.Ed College</a></li>
</ul>
<div class="tab-content" style="margin-top:30px;margin-bottom:30px">
<!-- <div class="row tab-pane fade in active" id="mtrcscl1">
<div class="rooms">
<h2 class="hide-sec">Matriculation Stream</h2> -->
<div class="row">
<div class="col-sm-3" id="mtrcscl1">
<div class="brdrlt">
<a target="_blank" href="http://sowthuraiyur.edu.in/">
<h4>Sowdambikaa Boys MHSS</h4>
<p>Thuraiyur - Trichy</p>
</a>
</div>
</div>
<div class="col-sm-3" id="mtrcscl1">
<div class="brdrlt">
<a target="_blank" href="http://sowthottiyam.edu.in/">
<h4>Sowdaambikaa MHSS</h4>
<p>Thottiyam - Trichy</p>
</a>
</div>
</div>
<div class="col-sm-3" id="mtrcscl1">
<div class="brdrlt">
<a target="_blank" href="http://sowshivani.edu.in/">
<h4>Sowdambikaa MHSS</h4>
<p>T.Pettai - Trichy</p>
</a>
</div>
</div>
<div class="col-sm-3" id="mtrcscl1">
<div class="brdrlt">
<a target="_blank" href="http://cmhss.edu.in/">
<h4>Chellammal Boys MHSS</h4>
<p>Thiruverumbur - Trichy</p>
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3" id="mtrcscl1">
<div class="brdrlt">
<a target="_blank" href="http://chelammal.edu.in/">
<h4>Chelammal MHSS</h4>
<p>Crawford - Trichy</p>
</a>
</div>
</div>
<div class="col-sm-3" id="mtrcscl1">
<div class="brdrlt">
<a target="_blank" href="http://akkv.sowdambikaa.edu.in/">
<h4>AKKV MHSS</h4>
<p>Annamalai Nagar - Trichy</p>
</a>
</div>
</div>
<div class="col-sm-3" id="mtrcscl1">
<div class="brdrlt">
<a target="_blank" href="http://sowthuraiyur.edu.in/">
<h4>Sowdambikaa Girls MHSS</h4>
<p>Thuraiyur - Trichy</p>
</a>
</div>
</div>
<div class="col-sm-3" id="mtrcscl1">
<div class="brdrlt">
<a target="_blank" href="">
<h4>Chellammal MHSS</h4>
<p>Nagamangalam - Trichy</p>
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3" id="mtrcscl1">
<div class="brdrlt">
<a target="_blank" href="">
<h4>Chellammal MHSS</h4>
<p>Viralimalai - Pudukottai</p>
</a>
</div>
</div>
<div class="col-sm-3" id="mtrcscl1">
<div class="brdrlt">
<a target="_blank" href="http://cmhss.edu.in/">
<h4>Chellammal Girls MHSS</h4>
<p>Thiruverumbur - Trichy</p>
</a>
</div>
</div>
<div class="col-sm-3" id="cbse">
<!-- <div class="row tab-pane fade" id="cbse">
<div class="col-sm-3"></div>
<div class="rooms col-sm-3">
<h2 class="hide-sec">CBSE Stream</h2> -->
<div class="brdrlt">
<a target="_blank" href="http://cvcsmusiri.edu.in/">
<h4>Chelammal Vidhyaashram</h4>
<p>Musiri - Trichy</p>
</a>
</div>
</div>
<div class="col-sm-3" id="cbse">
<div class="brdrlt">
<a target="_blank" href="http://cvcbse.edu.in/">
<h4>Chellammal Vidyalaya</h4>
<p>Thiruverumbur - Trichy</p>
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3" id="cbse">
<div class="brdrlt">
<a target="_blank" href="http://srmschool.edu.in/">
<h4>SRM Public</h4>
<p>Thuraiyur - Trichy</p>
</a>
</div>
</div>
<!-- <div class="row tab-pane fade" id="hgrscl">
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="rooms col-sm-3">
<h2 class="hide-sec">State Board</h2> -->
<div class="col-sm-3" id="hgrscl">
<div class="brdrlt">
<a target="_blank" href="http://cmullai.sowdambikaa.edu.in/">
<h4>Mullai HSS</h4>
<p>Thottiyam - Trichy</p>
</a>
</div>
</div>
<!-- <div class="row tab-pane fade" id="clg">
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="rooms col-sm-3">
<h2 class="hide-sec">B.Ed College</h2> -->
<div class="col-sm-3" id="clg">
<div class="brdrlt">
<a target="_blank" href="http://shivacollege.edu.in/">
<h4>Shiva College of Education</h4>
<p>Thathiengarpet - Trichy</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
而且css是，
.ourscl .navbar-default{
background-color:rgb(222, 35, 41) !important; /*rgb(144,21,14)!important;*/
}
.ourscl {
background: #ffcb05;
}
.nav-pills li.active a{
background-color: #FEC73D!important;
}
.nav-pills li a:focus{
background-color:#FEC73D!important;
}
.nav-pills li a:hover{
background-color: #FEC73D!important;
}
.nav-pills li a {
color:#fff;
}
.nav-pills li a{
border-radius:0px!important;
}
.hide-sec{
display: none;
text-align: left!important;
}
.nav-pills{
display: block;
}
.brdrlt{
border-left:1px solid #FEC73D!important;
text-align: left;
padding-left: 10px;
margin-bottom:20px;
}
.tab-wid.active::after{
content: '';
position: absolute;
top: 100%;
/* top: 50%; */
/* margin-top: -13px; */
border-left: 0;
border-right: 13px solid transparent;
border-left: 13px solid transparent;
border-top: 10px solid #FEC73D;
}
.schools-title {
color: #fff;
background: url(images/title_white.png) no-repeat bottom;
}
.italic-line {
font-style: italic;
color: #fff;
margin-top: 35px;
margin-bottom: 20px;
}
.plus_image {
background: url(images/plus-sign.png);
background-repeat: repeat;
}
.brdrlt h4 {
color: #bc0101
}
.brdrlt p {
color: #fff;
}
我所做的jsfiddle链接是
https://jsfiddle.net/1at91Lgo/（更好地扩展输出框以更好地查看列分割，如图像中所示）..
我需要的输出就像附图一样
由于图像清楚地描述了我的要求，如果我点击CBSE流，带有cbse流的学校应该活跃而其他学校要处于非活动状态。而我的第二个要求就是选择的流学校应该排在第一行，就像在图片。任何给我一个更好，更清晰的解决方案的帮助都会更加明显。
1 个答案:
答案 0 :(得分：0)
使用CSS，您可以通过悬停获得类似的结果，将其添加到您的CSS：.tab-content:hover .col-sm-3:not(:hover) { opacity: .5; }
但是，如果您需要点击以创建＆＃34;永久性＆＃34;对于链接的状态，您应该查看JavaScript解决方案以切换容器和活动元素上的特定类。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？