Question

我正在尝试使用Javascript在点击列表项时将li的类更改为“active”。我试图实现我链接到＆amp;的代码贴在下面，但我无法让它工作。有人能帮我弄明白我哪里出错了吗？

HTML：

<ul id="homelist">
    <li class="hlist1">
        <div class="tybtns">
            <img alt="Touchpoint Map" src=
            "http://www.allegraaz.com/wp-content/uploads/2016/04/buttons.jpg">
            <ul class="touch">
                <li class="t1"><span></span> <img alt="Touch 1 Direct Mail"
                src=
                "http://www.allegraaz.com/wp-content/uploads/2016/05/t1a.jpg">
                 <img alt="Touch 1 Direct Mail" src=
                "http://www.allegraaz.com/wp-content/uploads/2016/05/t1b.jpg">
                </li>
                <li class="t2"><span></span> <img alt="Touch 2 Email" src=
                "http://www.allegraaz.com/wp-content/uploads/2016/05/t2a.jpg">
                 <img alt="Touch 2 Email" src=
                "http://www.allegraaz.com/wp-content/uploads/2016/05/t2b.jpg">
                </li>
                <li class="t3"><span></span> <img alt=
                "Touch 3 Personalized URL" src=
                "http://www.allegraaz.com/wp-content/uploads/2016/05/t3a.jpg">
                 <img alt="Touch 3 Personalized URL" src=
                "http://www.allegraaz.com/wp-content/uploads/2016/05/t3b.jpg">
                </li>
                <li class="t4">
                    <span></span> <a class="playSound"><img alt=
                    "Touch 4 Mobile-Text" src=
                    "http://www.allegraaz.com/wp-content/uploads/2016/04/touch4_01-e1460158229527.jpg">
                    </a> <img alt="Touch 4 Mobile-Text" src=
                    "http://www.allegraaz.com/wp-content/uploads/2016/04/t4text-e1460564587270.jpg">
                    </li>
                <li class="t5"><span></span> <img alt=
                "Touch 5 Social Media" src=
                "http://www.allegraaz.com/wp-content/uploads/2016/05/t5a.jpg">
                 <img alt="Touch 5 Social Media" src=
                "http://www.allegraaz.com/wp-content/uploads/2016/05/t5b.jpg">
                </li>
            </ul>
        </div>
    </li>
</ul>

CSS：

#homelist li {
    list-style-type: none;
}

.tybtns {
    margin: 20px auto;
    max-width: 765px;
    position: relative;
}

#homelist li.hlist1 .tybtns img {
    display: block;
    float: none;
    margin: 0 auto;
}

#homelist .tybtns li {
    list-style: outside none none;
}

#homelist .tybtns li span {
    cursor: pointer;
    height: 70px;
    left: 8px;
    position: absolute;
    top: 5px;
    width: 70px;
}

#homelist .tybtns li.t2 span {
    left: 176px;
}

#homelist .tybtns li.t3 span {
    left: 345px;
}

#homelist .tybtns li.t4 span {
    left: 513px;
}

#homelist .tybtns li.t5 span {
    left: 682px;
}

#homelist li.hlist1 .tybtns li img {
    display: none;
}

#homelist li.hlist1 .tybtns li.active img {
    display: inline-block;
    vertical-align: top;
}

#homelist .tybtns li.t1 span::after,#homelist .tybtns li.t2 span::after,#homelist .tybtns li.t3 span::after,#homelist .tybtns li.t4 span::after,#homelist .tybtns li.t5 span::after {
    border-bottom: 1px solid #fff;
    bottom: -20px;
    content: "Touch 1 - Direct Mail";
    display: block;
    font-size: 11px;
    left: -25px;
    position: absolute;
    text-align: center;
    width: 110px;
}

#homelist .tybtns li.t2 span::after {
    content: "Touch 2 - Email";
}

#homelist .tybtns li.t3 span::after {
    content: "Touch 3 - pURL";
}

#homelist .tybtns li.t4 span::after {
    content: "Touch 4 - Mobile";
}

#homelist .tybtns li.t5 span::after {
    content: "Touch 5 - Social";
}

#homelist .tybtns li.t1.active span::after {
    border-bottom: 1px solid #bad636;
}

#homelist .tybtns li.t2.active span::after {
    border-bottom: 1px solid #9f2065;
}

#homelist .tybtns li.t3.active span::after {
    border-bottom: 1px solid #f7941f;
}

#homelist .tybtns li.t4.active span::after {
    border-bottom: 1px solid #1b7ba3;
}

#homelist .tybtns li.t5.active span::after {
    border-bottom: 1px solid #606062;
}

JavaScript的：

$(".touch span").click(function() {
    if ($(this).parent().hasClass('active')) {
        (this).parent().removeClass('active');
    } else {
        (".touch span").parent().removeClass('active');
        (this).parent().addClass('active');
    }
});

Answer 1

你需要在小提琴中加载jquery。您可以在javascript部分的设置cog上启用它

从框架中选择您喜欢的jquery版本＆amp;延期下拉，你应该好好去。
一旦我改变了这个设置，一切都很有效，看起来很棒！

Answer 2

正如@Jonathan Seed所提到的，你需要将jQuery添加到你的JSFiddle中才能使它工作。我还想补充一点，你可以简化你的jQuery代码......

$(".touch span").click(function() {
  $('.touch span').parent().removeClass('active');
  $(this).parent().addClass('active');
});

通过从所有active父项中删除.touch span类，然后将其重新添加到所单击的父项中，从而无需条件。

Answer 3

很难在空的范围内点击，可能你想制作一个不同的标记，即

<li class="t1">
    <span>
        <img src="http://www.allegraaz.com/wp-content/uploads/2016/05/t1a.jpg" alt="Touch 1 Direct Mail" />
        <img src="http://www.allegraaz.com/wp-content/uploads/2016/05/t1b.jpg" alt="Touch 1 Direct Mail" />
    </span>
</li>

您还忘记在以下行中调用JQuery：$(".touch span").parent().removeClass('active'); - 您的代码在开头没有$。

Answer 4

如果您使用某些jQuery资源，则必须致电您的网页。这样做，一切都会好的。你的代码是对的。：）

以下是链接，现在已与jQuery相关联。

https://jsfiddle.net/d9m7h0oe/3/

如何使用Javascript将li更改为活动点击？

4 个答案: