jquery - 如何使选定的标题及其内容处于事件状态，而其他的则处于非事件状态？

Question

我正在为教育机构做一个网站，其中有分部为 matric、cbse 和 state board 的学校，还有一所大学。我需要的是，当我们点击 matriculation stream 时，matric 学校需要处于活跃状态，对于其他流(cbse、stateboard 和大学)同样明智。.现在我已经给出了药丸，并提到了里面的每个机构，标题都是药丸..

我试过的 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 流的学校应该处于事件状态，而其他学校则处于非事件状态。我的第二个要求是所选流学校应位于顶行，如图像。任何能为我提供更好、更清晰的解决方案的帮助都将不胜感激。

Answer 1

使用 CSS，您可以通过悬停获得类似的结果，将其添加到您的 CSS:.tab-content:hover .col-sm-3:not(:hover) { opacity: .5; }

但是，如果您需要通过点击为链接创建“永久”状态，您应该研究一种 JavaScript 解决方案来切换容器和事件元素上的特定类。