javascript - Jquery on click delays 切换类-6ren

javascript - Jquery on click delays 切换类

转载作者：太空宇宙更新时间：2023-11-04 08:25:22

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

这是我的 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/

文章推荐： javascript - 将文本框值传递给 JavaScript 中的编辑函数

文章推荐： java - 基于 JBoss EJB 的 Web 服务日期格式

文章推荐： java - 这是复制文件的有效方法吗

文章推荐： html - 我是 HTML5 的新手，谁能帮我解决这个问题？

jquery - .on ('click' ) 和 .off ('click' ).on ('click' ) 之间的区别
将 .off 与 .click 结合使用有何用途或区别？ $('#link').off('click').on('click',function(){}); 对比 $('#link').on('cli
javascript - JQuery/DOM元素 "click"事件注册: on ("click") VS click() VS addeventlistener ("click")
我正在学习 javascript，并且我见过不止一种注册点击事件的方法: $(DOMelement).click(function() {}); $(DOMelement).on('click',fu
jQuery .on ('click' ) 与 .click() 和 .delegate ('click' )
我习惯使用.click()和delegate('click') ，所以当我读到这两个在 jQuery 的最新版本中都被弃用时，我想我应该读一下它，但我有点摸不着头脑。文档 here似乎表明这是 .l
jquery - $(sel).bind ("click"、 $(sel).click(、 $(sel).live ("click"、 $(sel).on ("click"之间有什么显着差异？
我已经使用它们很长一段时间了，但大多数时候，我更喜欢较短的，但是，我只是想真正深入了解本质细节。我可能一直在创建有错误的代码，并且我不想在网络上贡献和传播懒惰完成的代码。所以，告诉我: What a
javascript - 有没有办法实现 "click"、 "double click"和 "click and hold"来处理同一元素？
我想实现类似在 Android 上点击 Instagram 中的帖子的功能(我认为在 iOS 上应该是相同的功能)。在 Instagram 中，如果有人点击照片，它会打开，双击，它会被喜欢，然后单击并
click - jquery click 事件只运行一次
我的点击事件有问题。它运行 1 次。示例: 我有 3 页(1 2 3)。当我点击 2 时它起作用了。然后在第 3 页，它又可以工作了。但我再次点击 2 不起作用。该事件未触发。 $("div .top
javascript - .off ('click' ) - 但我想再次返回 'click'
我正在尝试这样做。在 jsfiddle 中:http://jsfiddle.net/QGGhW/2/ 但是在我点击 not now 之后，下一个文本输入就不再可点击了。我该怎么做？是否有类似 .on
jquery .live ('click' ) 与 .click()
我想知道是否有任何情况下使用 .click(function {...}); 而不是 .live('click', function { ...});? 据我所知，实时选项似乎是一个更好的选择，因此我
javascript - .click() 在嵌套在 .click() 元素内部的元素上
我正在尝试在 Accordion 内部创建一个 Accordion ......并且我有点挣扎。本质上，我有一个 div .applicant，单击它会添加一个 .expand 类，它将高度设置为
jquery .on ("click")在 .off ("click")之后不起作用
我可以使用一些帮助来调试这个: var factBody = jQuery(".fact__body"); jQuery(".fact").on("click", function() { j
jQuery if click 包含 clicked 类
如果我有一个用于 clicked 类的监听器，以及另一个用于 click-option-1、click-option-2 类的监听器，以及click-option-3，如何在我的 clicked 事件
jquery - .on ('click' ) 与 .click() 之间的区别
下面的代码有什么区别吗？ $('#whatever').on('click', function() { /* your code here */ }); 和 $('#whatever').
jquery - .on ('click' ) VS 'selector.click
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 9 年前。 Improv
javascript - jQuery on(click)/click 事件未触发
我不擅长 UI 设计，所以我使用 bootstrap 和 jquery 来帮助我一点。我正在尝试将 jQuery 事件绑定(bind)到导航栏，因此当用户单击导航栏上的 p 标签时，它应该触发单击事件
jquery - click() 函数中的 click() 函数不起作用
问题是，当我单击 delaccbut 按钮时，单击功能起作用并显示消息，但是当我单击 confdel 或 redel 按钮来自 click 函数，它不...为什么？ HTML: Delete my
javascript - jQuery .click()/.on ("click"...) 我需要帮助在交替点击时交换文本
我想要完成的是“类似”的东西 $("button .toggleExcerpt) .toggle( function FIRST() { do first function..
javascript - click() 中的函数在设置元素的 click 方法后执行
function show1(){ $("#btn").click(show2()); window.alert(
javascript - .click/.on ('click' 内的 IF 语句不起作用
我不明白为什么这不起作用。当我单击具有该类名的复选框时，clickId 被赋予值access-toggle-all，所以这没有意义(至少对我来说).. $(document).ready(functi
javascript - 如何在触发另一个 click() 时清除 click()？
我有一个关于 click() 的复杂问题。我有 4 个按钮，分别命名为功能 1、功能 2、方法 1 和方法 2。 Function 1 Function 2 Method 1 Method 2 当单
javascript - this.click() 和 $(this).click() 有什么区别？
最后，我认为这不是我特别需要解决的问题，但我不明白为什么会这样，这让我很困扰。基本上，我有一些复选框，我只希望用户能够选择其中的一定数量。我正在使用下面的代码来实现该效果。 $j( function

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Jquery on click delays 切换类