javascript - 如何使单击的选项卡及其内容处于事件状态，而其他选项卡处于非事件状态？

标签 javascript jquery html css

我的 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>

我确信我使用这个是错误的，但我对实现我想要的结果没有一个清晰的想法。 这是我实际需要的图像.. enter image description here

最佳答案

不要使用多个 ID。这是一种不好的做法，它会把整个网站搞得一团糟。当您尝试将 a 链接到 # 部分时，它只会链接到其中一个...而不是所有。

无论如何，我将 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>

关于javascript - 如何使单击的选项卡及其内容处于事件状态，而其他选项卡处于非事件状态？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44538105/

上一篇：javascript - 下拉选择器

下一篇：javascript - 如何将 JavaScript 函数应用于选择表单？

相关文章：

javascript - 仅显示 #Each block 中 1 个元素的 Svelte 组件

Javascript 更改 TD bgColor onClick

html - 如何使用 Bootstrap 将下拉菜单添加到 HTML/CSS 中的按钮？

html - Webkit 输入文件，隐藏转换标签 : translateX

javascript - 这个 mixins 代码是书 "The Principles of Object-Oriented JavaScript"的错误吗

javascript - 当页面上有多个按钮具有相同选择器时，检查到底单击了什么按钮

javascript计算有时不会发生

javascript - 使用 Jquery 在下拉菜单中查找文本并将其设置为“选定”

javascript - 如何防止重写:hover on .点击 Action

html - HTML5的<article>标签只能在博客中使用吗？

©2024 IT工具网  联系我们