gpt4 book ai didi

javascript - 如何仅突出显示选定的
  • 元素?
  • 转载 作者:太空宇宙 更新时间:2023-11-03 22:22:29 25 4
    gpt4 key购买 nike

    我正在尝试学习网页设计,但在尝试通过 java 脚本向其中添加类时遇到了麻烦。

    html代码:

    <ul>
    <li onclick="switchChannel(channel1)>
    #Channel1
    </li>
    <li onclick="switchChannel(channel2) class="selected">
    #Channel2
    </li>
    <li onclick="switchChannel(channel3)>
    #Channel3
    </li>

    CSS 代码:

    .selected{
    color:blue;
    border-left:4px solid blue;
    }

    javascript:脚本.js

    function switchChannel(channelName) {
    }

    javascript:channel.js

        var channel1={
    name:"Channel1",
    createdOn:new Date("April 1, 2016"),
    starred:false
    };

    var channel2={
    name:"Channel1",
    createdOn:new Date("April 1, 2016"),
    starred:false
    };

    我希望能够从列表中单击一个 channel1 并将 .selected 类应用于它,但是当单击 channel2 时,从 channel1 中删除 .selected 并将其应用于 channel2 等等...

    如果我搞砸了代码中的任何其他内容,请随时发表评论。

    最佳答案

    这里有很多答案,但它们似乎并没有解决实际问题。这是一个使用 vanilla JavaScript 来完成您所要求的快速示例。

    function switchChannel(el){
    // find all the elements in your channel list and loop over them
    Array.prototype.slice.call(document.querySelectorAll('ul[data-tag="channelList"] li')).forEach(function(element){
    // remove the selected class
    element.classList.remove('selected');
    });
    // add the selected class to the element that was clicked
    el.classList.add('selected');
    }
    .selected{
    color:blue;
    border-left:4px solid blue;
    }
    <!-- Add the data-tag attribute to this list so you can find it easily -->
    <ul data-tag="channelList">
    <li onclick="switchChannel(this)">Channel 1</li>
    <li onclick="switchChannel(this)" class="selected">Channel 2</li>
    <li onclick="switchChannel(this)">Channel 3</li>
    </ul>

    关于javascript - 如何仅突出显示选定的 <li> 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52973660/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com