如何使用jquery/javascript切换某些元素？

有很多这样的词：

word1 word2 word3 ...

一个单词中的每个单词

我对javascript/jquery不太熟悉。提前感谢您的帮助。

像这样试试看

$(document).ready(function () {
    $('a').click(function () {
        if ($(this).next('div').hasClass('active')){
            $('.sents').removeClass('active');
        }
        else{
            $('.sents').removeClass('active');
            $(this).next('div').addClass('active');
        } 
    });
});

像这样试试

$(document).ready(function () {
    $('a').click(function () {
        if ($(this).next('div').hasClass('active')){
            $('.sents').removeClass('active');
        }
        else{
            $('.sents').removeClass('active');
            $(this).next('div').addClass('active');
        } 
    });
});

---

除了在单击同一个单词时隐藏示例之外，您的代码几乎可以正常工作。要做到这一点，您必须首先获得单击单词的当前状态。仅当它尚未激活时才将其激活

要获取当前状态，可以使用hasClass'active'。因为您是有条件地添加类，所以可以在if语句中使用addClass'active'

或者，您可以使用toggleClass'active'！isActive，但是当再次单击某个单词来停用该单词时，您会尝试删除一个类，您知道该类以前已被删除。这将是与DOM的无用交互，我更喜欢使用if-then来防止这种情况

$document.readyfunction{ $'a'。单击函数{ var isActive=$this.next'div'。hasClass'active'； $'a'。下一个'div'。删除类'active'； 如果！我是活跃的{ $this.next'div'。addClass'active'； } }; }; a:悬停{ 背景颜色：黄色； } sents先生{ 显示：无； } .主动{ 显示：块； 位置：绝对位置； 背景颜色：黄色； 宽度：100%； 填充物：5px； } 字1 这是第一个例子 字2 这是第二个例子 这是第二个例子 字3 这是第三个例子 这是第三个例子 这是第三个例子

---

除了在单击同一个单词时隐藏示例之外，您的代码几乎可以正常工作。要做到这一点，您必须首先获得单击单词的当前状态。仅当它尚未激活时才将其激活

要获取当前状态，可以使用hasClass'active'。因为您是有条件地添加类，所以可以在if语句中使用addClass'active'

或者，您可以使用toggleClass'active'！isActive，但是当再次单击某个单词来停用该单词时，您会尝试删除一个类，您知道该类以前已被删除。这将是与DOM的无用交互，我更喜欢使用if-then来防止这种情况

$document.readyfunction{ $'a'。单击函数{ var isActive=$this.next'div'。hasClass'active'； $'a'。下一个'div'。删除类'active'； 如果！我是活跃的{ $this.next'div'。addClass'active'； } }; }; a:悬停{ 背景颜色：黄色； } sents先生{ 显示：无； } .主动{ 显示：块； 位置：绝对位置； 背景颜色：黄色； 宽度：100%； 填充物：5px； } 字1 这是第一个例子 字2 这是第二个例子 这是第二个例子 字3 这是第三个例子 这是第三个例子 这是第三个例子

---

问题是从所有div（包括要切换的div）中删除.active类，然后toggleClass函数将其添加回，因此要切换的div始终可见

使用同级选择器功能可避免这种情况：

$(document).ready(function () {
    $('a').click(function () {
        $(this).next('div').siblings().removeClass('active');
        $(this).next('div').toggleClass('active');
    });
});

---

工作小提琴：

问题在于，您从所有div（包括要切换的div）中删除.active类，然后toggleClass函数将其添加回，因此要切换的div将始终可见

使用同级选择器功能可避免这种情况：

$(document).ready(function () {
    $('a').click(function () {
        $(this).next('div').siblings().removeClass('active');
        $(this).next('div').toggleClass('active');
    });
});

---

工作小提琴：

很好的解决方案！老实说，比我的好。@GolezTrol:谢谢！很不错的！兄弟姐妹ftw:DGood一；我也不知道兄弟姐妹的事。很好的解决办法！老实说，比我的好。@GolezTrol:谢谢！很不错的！兄弟姐妹ftw:DGood一；我也不知道兄弟姐妹的事。

$(document).ready(function () {
    $('a').click(function () {
        $(this).next('div').siblings().removeClass('active');
        $(this).next('div').toggleClass('active');
    });
});