Question

我对Javascript很新，我遇到了一个很烦人的问题。

我有一个包含列表的列表。我有一个脚本，可以在单击时将列表设置为可见/不可见。但是，一旦按下它，我就不会切换/添加一个类到链接。

我的列表看起来像这样

<ul>
    <li><a href="#" onclick="toggle('item1');">Click something</a>
    <ul id="item1" style="display: none;">
        <li>Something ...</li>
        <li>Something something</li>
    </ul></li>
    <li><a href="#" onclick="toggle('item2');">Click something else</a>
    <ul id="item2" style="display: none;">
        <li>Something more...</li>
        <li>Something something less?</li>
    </ul></li>
</ul>

我的脚本如下所示：

<script type="text/javascript">
    function toggle(id) {
        var v = document.getElementById(id);

        if (v.style.display == '') {
            v.style.display = 'none';
            v.removeClass("selected");
        } else {
            v.style.display = '';
            v.addClass("selected");
        }
    }
</script>

列表显示和隐藏，但不会添加或删除类。

CSS就像这样：

a:link {
    color: #000000;
    text-decoration: none;
}

a:hover, a.selected {
    color: #005b97;
    text-decoration: none;
    padding-left: 2px;
}

提前致谢

最诚挚的问候本杰明

Answer 1

js没有内置的添加和删除类

试试这个

添加课程

document.getElementById("MyElement").className += " MyClass";

删除课程

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace ( /(?:^|\s)MyClass(?!\S)/ , '' )

如果你需要检查一个元素是否有一个类

function hasClass(ele,cls) {
return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}

Answer 2

在vanilla JavaScript中没有addClass / removeClass。

您必须使用HTML5 classList API或直接操纵v.className。

Answer 3

document.getElementById("idElement").setAttribute("class", "className");

Answer 4

试图用更少的代码来做。可悲的是，它可以满足你的需要。

<强> HTML：

<ul>
<li><a class="aSwitch" href="#" >Click something</a>
<ul id="item1" style="display:none">
    <li>Something ...</li>
    <li>Something something</li>
</ul></li>
<li><a class="aSwitch" href="#" >Click something else</a>
<ul id="item2" style="display:none">
    <li>Something more...</li>
    <li>Something something less?</li>
</ul></li>

的 CSS：

a:link { color: #000000; text-decoration: underline; } a.selected { color: #005b97; text-decoration: none; padding-left: 2px; }

的的jQuery

$('a.aSwitch').click(function() { $(this).next().toggle(); $(this).toggleClass('selected'); });

在此处查看：FIDDLE

Answer 5

最容易添加jquery插件

<script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>

将代码更改为

<script type="text/javascript">
function toggle(id) {
    var v = document.getElementById(id);
    $('#' + id).toggleClass("selected");
    if (v.style.display == '') {
        v.style.display = 'none';
    } else {
        v.style.display = '';
    }
}
</script>

使用Javascript更改a-element上的类

5 个答案: