如何使所选标签及其内容处于活动状态，其他标签则为非活动状态？

Question

我的jsfiddle链接是https://jsfiddle.net/1at91Lgo/,

我使用的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>
        <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="#matric" data-toggle="pill">Matriculation Stream</a></li>
          <li class="brdrlft tab-wid font-sz"><a href="#cbse" data-toggle="pill">CBSE Stream</a></li>
          <li class="brdrlft tab-wid font-sz"><a href="#stateboard" data-toggle="pill" >State Board</a></li>
          <li class="tab-wid font-sz"><a href="#college" data-toggle="pill" >B.Ed College</a></li>
        </ul>
        <div class="tab-content" style="margin-top:30px;margin-bottom:30px">
          <div class="row">
            <div class="col-sm-3">
              <div class="brdrlt" id="matric">
                <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">
              <div class="brdrlt" id="matric">
                <a target="_blank" href="http://sowthottiyam.edu.in/">
                  <h4>Sowdaambikaa MHSS</h4>
                  <p>Thottiyam - Trichy</p>
                </a>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="brdrlt" id="matric">
                <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">
              <div class="brdrlt" id="matric">
                <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">
              <div class="brdrlt" id="matric">
                <a target="_blank" href="http://chelammal.edu.in/">
                  <h4>Chelammal MHSS</h4>
                  <p>Crawford - Trichy</p>
                </a>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="brdrlt" id="matric">
                <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">
              <div class="brdrlt" id="matric">
                <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">
              <div class="brdrlt" id="matric">
                <a target="_blank" href="">
                  <h4>Chellammal MHSS</h4>
                  <p>Nagamangalam - Trichy</p>
                </a>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-3">
              <div class="brdrlt" id="matric">
                <a target="_blank" href="">
                  <h4>Chellammal MHSS</h4>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-3">
              <div class="brdrlt" id="cbse">
                <a target="_blank" href="http://srmschool.edu.in/">
                  <h4>SRM Public</h4>
                  <p>Thuraiyur - Trichy</p>
                </a>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="brdrlt" id="stateboard">
                <a target="_blank" href="http://cmullai.sowdambikaa.edu.in/">
                  <h4>Mullai HSS</h4>
                  <p>Thottiyam - Trichy</p>
                </a>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="brdrlt" id="college">
                <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>
  </section>       <p>Viralimalai - Pudukottai</p>
                </a>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="brdrlt" id="matric">
                <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">
              <div class="brdrlt" id="cbse">
                <a target="_blank" href="http://cvcsmusiri.edu.in/">
                  <h4>Chelammal Vidhyaashram</h4>
                  <p>Musiri - Trichy</p>
                </a>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="brdrlt" id="cbse">
                <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">
              <div class="brdrlt" id="cbse">
                <a target="_blank" href="http://srmschool.edu.in/">
                  <h4>SRM Public</h4>
                  <p>Thuraiyur - Trichy</p>
                </a>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="brdrlt" id="stateboard">
                <a target="_blank" href="http://cmullai.sowdambikaa.edu.in/">
                  <h4>Mullai HSS</h4>
                  <p>Thottiyam - Trichy</p>
                </a>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="brdrlt" id="college">
                <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>
  </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;
}

以下是我需要的内容：如果我在选项卡上点击任何菜单（就像在fiddle中），所选菜单及其内容应该变为活动状态，我已经给与所有内容相关的菜单标题一个ID。我尝试过的jQuery脚本如下：

  <script type="text/javascript">
$('.nav-pills li a').click(function (e) {
     e.preventDefault();
    $(this).tab('show');

     //removing active class from other selected/default tab
    $(".nav-pills li a .active").removeClass("active");

    //adding active class to current clicked tab
    $(this).parent().addClass("active");
});
  </script>

我相信我在使用这个方面是错误的，但我对实现我想要的结果没有清晰的想法。这里是我实际需要的图片。

- Maniraj Murugan

---

你正在给 'li' 添加 .active 类。但是在移除 .active 类时，你却将其查询为 anchor 的子元素 $(".nav-pills li a .active").removeClass("active"); >> $(".nav-pills li.active").removeClass("active"); ? - undefined

@ManiRaj，你给多个div分配了相同的id，这是不正确的。请为HTML中的每个元素分配一个唯一的id。如果你真的需要给它们分配相同的id，那么请将其分配为data-id。但是id属性应该是唯一的。 - undefined

@ManishYadav，如果我点击那个有href属性的标题，这些id对应的链接应该变为激活状态，所以我保持了这样的方式。 - undefined

@ManiRaj 我注意到你的fiddle中有多个具有相同值的id，这不是一个好主意。 - undefined

@ManishYadav，我明白了，但我需要你的建议来使我的输出符合我的需求。 - undefined

Answer 1

不要使用多个ID。这是一种不好的做法，会搞乱整个站点。当您尝试将链接到#部分时，它只会链接到其中一个...而不是全部。

无论如何，我将a的href更改为简单的#，并添加了一个属性data-target:example，它将链接到具有该类的每个选项卡。

请参见下面的代码片段或jsFiddle。

$(".mtrcscl1").addClass("activetab")

$('.nav-pills li a').click(function (e) {
     e.preventDefault();
    
 

     //removing active class from other selected/default tab
    $(".nav-pills li.active").removeClass("active");
     var target = $(this).attr("data-target") 
    //adding active class to current clicked tab
    $(this).parent().addClass("active");
  $(".activetab").removeClass("activetab")
  $("." + target).addClass("activetab")
  
});

.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;
  opacity:0.2;
  transition:0.3s;
 }
 .activetab .brdrlt {
  opacity:1;
 }
.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 red;
}
.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;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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="#" data-target="mtrcscl1" data-toggle="pill">Matriculation Stream</a></li>
        <li class="brdrlft tab-wid font-sz"><a data-toggle="pill" href="#" data-target="cbse">CBSE Stream</a></li>
        <li class="brdrlft tab-wid font-sz"><a data-toggle="pill" href="#" data-target="hgrscl">State Board</a></li>
        <li class="tab-wid font-sz"><a data-toggle="pill" href="#" data-target="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" class="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 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 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 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 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 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 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 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 mtrcscl1">
                <div class="brdrlt">
                  <a target="_blank" href="">
                    <h4>Chellammal MHSS</h4>
                    <p>Viralimalai - Pudukottai</p>
                  </a>
                </div>
              </div>
              <div class="col-sm-3 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 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 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 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 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 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>
  </section>

- Mihai T

---

谢谢你的帮助，看起来很好。除此之外，我还需要的是，选定和活动的内容应该出现在第一行。如何实现这个？ - undefined

这个要做起来更复杂，而且你最初的问题只是想实现这个（点击时激活/非激活选项卡），所以请接受我的答案。如果你想要更多，你应该先尝试自己去做，然后在这里发布你尝试过的内容。 - undefined

我肯定会接受你的答案，但除此之外，我还需要一个我在问题中没有提到的要求。所以我问了你。 - undefined