文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >onClick活动选项卡添加/删除类

问onClick活动选项卡添加/删除类
EN

Stack Overflow用户
提问于 2020-02-12 06:37:00
回答 3查看 666关注 0票数 0

我正在使用active手风琴选项卡，我想在‘. .elementor-active’选项卡标题中添加类.siblings()，但是当我尝试添加active类时，它被添加到all‘..elementor tab-title’，我也使用了.siblings()和children()，但是仍然没有人能指出正确的方向。

​

代码语言：javascript
复制
(function($) {

  var allPanels = $('.elementor-accordion-item > .elementor-tab-content').hide();

  $('.elementor-accordion-item > .elementor-tab-title > a').click(function() {
    allPanels.slideUp();
    $('.elementor-accordion-item > .elementor-tab-title').addClass('elementor-active').closest().find('.elementor-active').removeClass('elementor-active');
    $(this).parent().next().slideDown();
    return false;
  });

})(jQuery);
代码语言：javascript
复制
.elementor-accordion {
  margin: 50px;
}

.elementor-accordion .elementor-tab-title,
.elementor-accordion .elementor-tab-content {
  padding: 10px;
  border: 1px solid black;
  border-bottom: 0;
}

.elementor-accordion .elementor-tab-title:last-of-type,
.elementor-accordion .elementor-tab-content:last-of-type {
  border-bottom: 1px solid black;
}

.elementor-accordion .elementor-tab-title a,
.elementor-accordion .elementor-tab-content a {
  display: block;
  color: black;
  font-weight: bold;
}

.elementor-accordion .elementor-tab-content {
  border-top: 0;
  font-size: 12px;
}

.elementor-accordion .elementor-tab-content:last-of-type {
  border-top: 1px solid white;
  position: relative;
  top: -1px;
}

a {
  text-decoration: none;
}

body {
  font: 16px Sans-Serif;
}

.elementor-tab-title.elementor-active {
  background: red;
}
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="elementor-accordion">
  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 1</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 2</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 3</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

</div>

​

html
javascript
jquery
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-02-12 06:41:59

这里有一些变化

只需在添加类$('.elementor-tab-title').removeClass('elementor-active');之前删除

并将类添加到目标元素$(this).parent().addClass('elementor-active');中

编辑：

如果您想要切换，那么可以使用$(this).parent().hasClass('elementor-active')检查If元素是否有类，并按下面的方式执行操作。

​

代码语言：javascript
复制
(function($) {

  var allPanels = $('.elementor-accordion-item > .elementor-tab-content').hide();

  $('.elementor-accordion-item > .elementor-tab-title > a').click(function() {
    //allPanels.slideUp();
    if($(this).parent().hasClass('elementor-active')){
      $(this).parent().removeClass('elementor-active').next().slideUp();
    } else {
     $(this).parent().addClass('elementor-active').next().slideDown();
    }
    return false;
  });

})(jQuery);
代码语言：javascript
复制
.elementor-accordion {
  margin: 50px;
}

.elementor-accordion .elementor-tab-title,
.elementor-accordion .elementor-tab-content {
  padding: 10px;
  border: 1px solid black;
  border-bottom: 0;
}

.elementor-accordion .elementor-tab-title:last-of-type,
.elementor-accordion .elementor-tab-content:last-of-type {
  border-bottom: 1px solid black;
}

.elementor-accordion .elementor-tab-title a,
.elementor-accordion .elementor-tab-content a {
  display: block;
  color: black;
  font-weight: bold;
}

.elementor-accordion .elementor-tab-content {
  border-top: 0;
  font-size: 12px;
}

.elementor-accordion .elementor-tab-content:last-of-type {
  border-top: 1px solid white;
  position: relative;
  top: -1px;
}

a {
  text-decoration: none;
}

body {
  font: 16px Sans-Serif;
}

.elementor-tab-title.elementor-active {
  background: red;
}
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="elementor-accordion">
  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 1</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 2</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 3</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

</div>

​

票数 -1
EN

Stack Overflow用户

发布于 2020-02-12 07:09:25

您可以使用$(this)而不是使用类获取元素。您需要了解this关键字如何在JavaScript中工作。

​

代码语言：javascript
复制
    (function ($) {

        var allPanels = $('.elementor-accordion-item > .elementor-tab-content').hide();
        $('.elementor-accordion-item > .elementor-tab-title > a').click(function () {
            if (!$(this).parent().hasClass('elementor-active')) {
                allPanels.slideUp();
                allPanels.prevObject.find('.elementor-active').removeClass('elementor-active');
                $(this).parent().addClass('elementor-active')
                $(this).parent().next().slideDown();
            }
            else {
                allPanels.slideUp();
                allPanels.prevObject.find('.elementor-active').removeClass('elementor-active');
            }

            return false;
        });

    })(jQuery);
代码语言：javascript
复制
.elementor-accordion {
  margin: 50px;
}

.elementor-accordion .elementor-tab-title,
.elementor-accordion .elementor-tab-content {
  padding: 10px;
  border: 1px solid black;
  border-bottom: 0;
}

.elementor-accordion .elementor-tab-title:last-of-type,
.elementor-accordion .elementor-tab-content:last-of-type {
  border-bottom: 1px solid black;
}

.elementor-accordion .elementor-tab-title a,
.elementor-accordion .elementor-tab-content a {
  display: block;
  color: black;
  font-weight: bold;
}

.elementor-accordion .elementor-tab-content {
  border-top: 0;
  font-size: 12px;
}

.elementor-accordion .elementor-tab-content:last-of-type {
  border-top: 1px solid white;
  position: relative;
  top: -1px;
}

a {
  text-decoration: none;
}

body {
  font: 16px Sans-Serif;
}

.elementor-tab-title.elementor-active {
  background: red;
}
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="elementor-accordion">
  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 1</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 2</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 3</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

</div>

​

票数 1
EN

Stack Overflow用户

发布于 2020-02-12 06:43:56

这可能就是你要找的。为了清晰起见，我分离了add和remove类。

​

代码语言：javascript
复制
(function($) {

  var allPanels = $('.elementor-accordion-item > .elementor-tab-content').hide();

  $('.elementor-accordion-item > .elementor-tab-title > a').click(function() {
    allPanels.slideUp();
    $('.elementor-accordion-item > .elementor-tab-title').removeClass('elementor-active');
    $(this).parent().addClass('elementor-active');
    $(this).parent().next().slideDown();
    return false;
  });

})(jQuery);
代码语言：javascript
复制
.elementor-accordion {
  margin: 50px;
}

.elementor-accordion .elementor-tab-title,
.elementor-accordion .elementor-tab-content {
  padding: 10px;
  border: 1px solid black;
  border-bottom: 0;
}

.elementor-accordion .elementor-tab-title:last-of-type,
.elementor-accordion .elementor-tab-content:last-of-type {
  border-bottom: 1px solid black;
}

.elementor-accordion .elementor-tab-title a,
.elementor-accordion .elementor-tab-content a {
  display: block;
  color: black;
  font-weight: bold;
}

.elementor-accordion .elementor-tab-content {
  border-top: 0;
  font-size: 12px;
}

.elementor-accordion .elementor-tab-content:last-of-type {
  border-top: 1px solid white;
  position: relative;
  top: -1px;
}

a {
  text-decoration: none;
}

body {
  font: 16px Sans-Serif;
}

.elementor-tab-title.elementor-active {
  background: red;
}
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="elementor-accordion">
  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 1</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 2</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 3</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

</div>

​

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/60182458

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档