1

我对 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;
}

提前致谢

最好的问候本杰明

4

5 回答 5

5

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|$)'));
}
于 2012-08-10T11:00:03.143 回答
3

vanilla JavaScript 中没有 addClass / removeClass。

要么你必须使用HTML5 classList API要么直接操作v.className.

于 2012-08-10T10:58:24.523 回答
1

试图用更少的代码来做到这一点。Hoefully 它做你需要它做的事情。

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

于 2012-08-10T11:49:40.780 回答
1 
document.getElementById("idElement").setAttribute("class", "className");
于 2012-08-10T11:01:35.247 回答
0

最容易你可以添加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>
于 2012-08-10T11:04:49.373 回答