javascript - Jquery on click delays 切换类

标签 javascript jquery html css

我正在尝试添加类并在单击时更改按钮颜色，一切正常但我注意到当我单击按钮时有一个小延迟 - 所以当我单击时 - 首先选项卡更改了它的内容- 在下一次点击时 - 它会切换类...并更改颜色

这是我的 Fiddle 或者我的Plunker - 以防 fiddle 不起作用(我遇到了一些问题)

这是代码

$(document).ready(function(){
  $('.tabs_div > li > a').on('click', function() {
    $.each($('.tabs_div > li'), function() {
      if ($(this).attr('class')) {
        $(this).find('a').find('span').toggleClass('active_bullet');
      }
    });
  });
  $('.next_btn').click(function() {
    $('.tabs_div > .active').next('li').find('a').trigger('click');
  });
});
.content-wrapper.parme_vous_page {
  background: repeating-linear-gradient(-45deg, #92deda, #92deda 3px, #49c8c1 2px, #49c8c1 8px);
}

.sidebar-menu .sidebar-item-special.active {
  background: repeating-linear-gradient(-45deg, #92deda, #92deda 3px, #49c8c1 2px, #49c8c1 8px) !important;
}

.sidebar-menu li.active > a > .sidebar-item-label,
.sidebar-menu li.active > a > span > .pull-right {
  color: rgb(255, 255, 255) !important;
}

.sidebar-menu .sidebar-item-special.active:before {
  right: 0;
  top: 25%;
  content: " ";
  position: absolute;
  pointer-events: none;
  margin-top: -30px;
  width: 21px;
  height: 30px;
  /* background: #f00; */
  background: repeating-linear-gradient(-45deg, #92deda, #92deda 3px, #49c8c1 2px, #49c8c1 8px);
  -webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 20px, black 21px);
}

.parme_vous_icon {
  width: 200px;
  height: 200px;
  background-color: #3f4760;
}

div.content-wrapper.parme_vous_page > div > div.page_container {
  width: 100%;
  margin-top: 25vh;
}

div.content-wrapper.parme_vous_page > div > div.page_container > div.row {
  margin-right: 51px !important;
  margin-left: 0px;
}

.links_col {
  min-width: 160px;
  min-height: 200px;
  border-radius: 15px;
  background-color: white;
  overflow: hidden;
  margin-bottom: 25px;
  -webkit-box-shadow: 11px 10px 31px -8px rgba(0, 0, 0, 0.47);
  -moz-box-shadow: 11px 10px 31px -8px rgba(0, 0, 0, 0.47);
  box-shadow: 11px 10px 31px -8px rgba(0, 0, 0, 0.47);
}

.logo_header {
  padding-top: 10%;
  text-align: center;
  min-height: 100px;
}

.logo_header img {
  width: 55px;
}

.logo_footer {
  padding: 15px;
  color: white;
  text-align: center;
  background-color: #3f4760;
  min-height: 100px;
}

.logo_footer p:nth-child(1) {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
}

.logo_footer p:nth-child(2),
.logo_footer p:nth-child(3) {
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  color: #aaadb5;
}

#myTab {
  list-style-type: none;
}

#myTab > li > a > span.tab_circle {
  /*border: 2px solid white;*/
  background-color: #5d3c95;
  height: 10px;
  border-radius: 50%;
  width: 10px;
}

.active_bullet {
  border: 2px solid white;
  height: 15px;
  border-radius: 50%;
  width: 15px;
}

#myTab > li > a > span.tab_toggler {
  display: inline-block!important;
  float: none!important;
  margin-left: -20px;
  font-size: 20px;
  color: white;
}

.next_btn> i {
  display: inline-block;
  border-radius: 73px;
  border: 8px solid white;
  background-color: white;
}

.next_btn {
  position: fixed;
  bottom: 20px;
  margin-left: 40%;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="skin-blue sidebar-mini" style="height: auto; min-height: 100%; background-color: grey;">

  <!-- container -->
  <div class="page_container">
    <div class="row">
      <div class="links_buttons col-md-2">
        <ul id="myTab" class="tabs_div">
          <li class="active"><a data-target="#first" data-toggle="tab"><span class="tab_circle tab_toggler"></span></a></li>
          <li><a data-target="#second" data-toggle="tab"><span class="tab_circle tab_toggler"></span></a></li>
          <li><a data-target="#third" data-toggle="tab"><span class="tab_circle tab_toggler"></span></a></li>
        </ul>
      </div>
      <div class="links_cont col-md-10">
        <div class="tab-content">
          <!---------------------------------------------FIRST TAB-------------------------------------------------->
          <div class="tab-pane active" id="first">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Facebook</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Blog</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Mon compte</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Fonctionnalité</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Fonctionnalité</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Fonctionnalité</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!---------------------------------------------SECOND TAB-------------------------------------------------->
          <div class="tab-pane" id="second">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Facebook</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Blog</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Mon compte</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Fonctionnalité</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Fonctionnalité</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Facebook</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!---------------------------------------------THIRD TAB-------------------------------------------------->
          <div class="tab-pane" id="third">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Blog</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Facebook</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Mon compte</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Fonctionnalité</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Fonctionnalité</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Fonctionnalité</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="next_btn">
          <i class="fa fa-arrow-down" aria-hidden="true"></i>
        </div>
      </div>
    </div>
  </div>

最佳答案

使用这个:

$(document).ready(function(){
  $('.tabs_div > li[class] > a').click(function(){
    $('span',this).toggleClass('active_bullet');
  })
})


$(document).ready(function(){
  $('.tabs_div > li[class] > a').click(function(){
    $('span',this).toggleClass('active_bullet');
  })
})
.content-wrapper.parme_vous_page {
  background: repeating-linear-gradient(-45deg, #92deda, #92deda 3px, #49c8c1 2px, #49c8c1 8px);
}

.sidebar-menu .sidebar-item-special.active {
  background: repeating-linear-gradient(-45deg, #92deda, #92deda 3px, #49c8c1 2px, #49c8c1 8px) !important;
}

.sidebar-menu li.active > a > .sidebar-item-label,
.sidebar-menu li.active > a > span > .pull-right {
  color: rgb(255, 255, 255) !important;
}

.sidebar-menu .sidebar-item-special.active:before {
  right: 0;
  top: 25%;
  content: " ";
  position: absolute;
  pointer-events: none;
  margin-top: -30px;
  width: 21px;
  height: 30px;
  /* background: #f00; */
  background: repeating-linear-gradient(-45deg, #92deda, #92deda 3px, #49c8c1 2px, #49c8c1 8px);
  -webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 20px, black 21px);
}

.parme_vous_icon {
  width: 200px;
  height: 200px;
  background-color: #3f4760;
}

div.content-wrapper.parme_vous_page > div > div.page_container {
  width: 100%;
  margin-top: 25vh;
}

div.content-wrapper.parme_vous_page > div > div.page_container > div.row {
  margin-right: 51px !important;
  margin-left: 0px;
}

.links_col {
  min-width: 160px;
  min-height: 200px;
  border-radius: 15px;
  background-color: white;
  overflow: hidden;
  margin-bottom: 25px;
  -webkit-box-shadow: 11px 10px 31px -8px rgba(0, 0, 0, 0.47);
  -moz-box-shadow: 11px 10px 31px -8px rgba(0, 0, 0, 0.47);
  box-shadow: 11px 10px 31px -8px rgba(0, 0, 0, 0.47);
}

.logo_header {
  padding-top: 10%;
  text-align: center;
  min-height: 100px;
}

.logo_header img {
  width: 55px;
}

.logo_footer {
  padding: 15px;
  color: white;
  text-align: center;
  background-color: #3f4760;
  min-height: 100px;
}

.logo_footer p:nth-child(1) {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
}

.logo_footer p:nth-child(2),
.logo_footer p:nth-child(3) {
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  color: #aaadb5;
}

#myTab {
  list-style-type: none;
}

#myTab > li > a > span.tab_circle {
  /*border: 2px solid white;*/
  background-color: #5d3c95;
  height: 10px;
  border-radius: 50%;
  width: 10px;
}

.active_bullet {
  border: 2px solid white;
  height: 15px;
  border-radius: 50%;
  width: 15px;
}

#myTab > li > a > span.tab_toggler {
  display: inline-block!important;
  float: none!important;
  margin-left: -20px;
  font-size: 20px;
  color: white;
}

.next_btn> i {
  display: inline-block;
  border-radius: 73px;
  border: 8px solid white;
  background-color: white;
}

.next_btn {
  position: fixed;
  bottom: 20px;
  margin-left: 40%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body class="skin-blue sidebar-mini" style="height: auto; min-height: 100%; background-color: grey;">

  <!-- container -->
  <div class="page_container">
    <div class="row">
      <div class="links_buttons col-md-2">
        <ul id="myTab" class="tabs_div">
          <li class="active"><a data-target="#first" data-toggle="tab"><span class="tab_circle tab_toggler"></span>Item1(Clickable)</a></li>
          <li><a data-target="#second" data-toggle="tab"><span class="tab_circle tab_toggler"></span>Item2Item3[have'nt class]</a></li>
          <li><a data-target="#third" data-toggle="tab"><span class="tab_circle tab_toggler"></span>Item3[have'nt class]</a></li>
        </ul>
      </div>
      <div class="links_cont col-md-10">
        <div class="tab-content">
          <div class="tab-pane active" id="first">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Facebook</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Blog</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Mon compte</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Fonctionnalité</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Fonctionnalité</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Fonctionnalité</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane" id="second">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Facebook</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Blog</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Mon compte</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Fonctionnalité</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Fonctionnalité</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Facebook</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
          <div class="tab-pane" id="third">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Blog</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Facebook</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Mon compte</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Fonctionnalité</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Fonctionnalité</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
                  <div class="logo_footer">
                    <p>Fonctionnalité</p>
                    <p>Lorem ipsum dolor</p>
                    <p>sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="next_btn">
          <i class="fa fa-arrow-down" aria-hidden="true"></i>
        </div>
      </div>
    </div>
  </div>

更新帖子:

如果您想要处理所有按钮，请像这样在选择器中删除 [class]:

$(document).ready(function(){
  $('.tabs_div > li > a').click(function(){
    $('span',this).toggleClass('active_bullet');
  })
})

如果你想在点击按钮时，移除其他按钮的影响，使用这个代码:

$(document).ready(function(){
  $('.tabs_div > li > a').click(function(){
    $('.tabs_div > li > a span').removeClass('active_bullet');
    $('span',this).toggleClass('active_bullet');
  })
})

关于javascript - Jquery on click delays 切换类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45216363/

上一篇：html - 我是 HTML5 的新手，谁能帮我解决这个问题？

下一篇：javascript - 将文本框值传递给 JavaScript 中的编辑函数

相关文章：

javascript - Drop down 中的数据绑定(bind)

javascript - 我的测试没有检测列表元素 - Protractor

来自 HTML 页面上搜索查询的 PHP Echo

JavaScript 鼠标单击 addEventListener 不工作

javascript - react 类没有被导出，我不明白为什么？

javascript - 让Flowplayer-Flash在缓冲的同时立即播放视频

javascript - 使用 key 作为 ID 将文本写入段落

javascript - .on ('show.bs.modal' ， function() 在 safari 和 firefox 中不起作用

JavaScript:将字符串 push() 到数组中返回 **null**

c# - 如何使用 c#.net 在电子邮件中将 Html 输入文件值作为附件发送

©2024 IT工具网  联系我们