关于点击延迟的Jquery切换班级

时间：2017-07-20 13:35:30

标签： javascript jquery html css

我尝试添加课程并在点击时更改按钮颜色，一切都很好但我注意到当我点击按钮时有一个小延迟 - 所以当我点击 - 首先标签更改了它的内容 - 并在下次点击时 - 它切换了课程......并更改了颜色

这是我的Fiddle 或者我的Plunker - 如果小提琴不工作（我经历过一些问题）

这是CODE

＆＃13;
＆＃13; 
$(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');
  });
});
＆＃13; 
.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%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

使用此： 

func setBubbleChart(dataPoints: [Int], values: [Int], amounts: [Int]) {

        var dataEntries: [BubbleChartDataEntry] = []

        for i in 0..<dataPoints.count {
            let dataEntry = BubbleChartDataEntry(x: Double(dataPoints[i]), y: Double(values[i]), size: 15.0)
            dataEntries.append(dataEntry)
        }

        let format = NumberFormatter()
        format.generatesDecimalNumbers = false
        format.zeroSymbol = ""
        _ = DefaultValueFormatter(formatter: format)

        let chartDataSet = BubbleChartDataSet(values: dataEntries, label: "Prashant")
        let chartData = BubbleChartData(dataSet: chartDataSet)



        chartDataSet.colors.append(setColor(value:30))

        bubbleChartView.doubleTapToZoomEnabled = true
        bubbleChartView.scaleXEnabled = true
        bubbleChartView.scaleYEnabled = true
        bubbleChartView.highlightPerTapEnabled = true
        bubbleChartView.highlightPerDragEnabled = true

        let firstLegend = LegendEntry.init(label: "Below 50", form: .default, formSize: CGFloat.nan, formLineWidth: CGFloat.nan, formLineDashPhase: CGFloat.nan, formLineDashLengths: nil, formColor: UIColor.black)
        let secondLegend = LegendEntry.init(label: "Between 50 and 75", form: .default, formSize: CGFloat.nan, formLineWidth: CGFloat.nan, formLineDashPhase: CGFloat.nan, formLineDashLengths: nil, formColor: UIColor.black)
        let thirdLegend = LegendEntry.init(label: "Over 75", form: .default, formSize: CGFloat.nan, formLineWidth: CGFloat.nan, formLineDashPhase: CGFloat.nan, formLineDashLengths: nil, formColor: UIColor.black)

        bubbleChartView.chartDescription = nil
        bubbleChartView.legend.entries = [firstLegend, secondLegend, thirdLegend]
        bubbleChartView.data = chartData
        bubbleChartView.drawBordersEnabled = true
        bubbleChartView.animate(xAxisDuration: 5.0, yAxisDuration: 5.0)

        let xAxis: XAxis = bubbleChartView.xAxis
        xAxis.drawAxisLineEnabled = true
        xAxis.drawGridLinesEnabled = true
        xAxis.drawLabelsEnabled = true
        xAxis.axisMinimum = 0
        xAxis.axisMaximum = 10

        let leftAxis: YAxis = bubbleChartView.leftAxis
        leftAxis.drawAxisLineEnabled = true
        leftAxis.drawGridLinesEnabled = true
        leftAxis.setLabelCount(2, force: true)
        leftAxis.axisMinimum = 0
        leftAxis.axisMaximum = 120

        let rightAxis: YAxis = bubbleChartView.rightAxis
        rightAxis.drawAxisLineEnabled = false
        rightAxis.drawGridLinesEnabled = true
        rightAxis.drawLabelsEnabled = false
    }


$(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');
  })
})
相关问题
最新问题