使用Javascript更改a元素上的类

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

提前谢谢

致意

---

Benjamin

在普通JavaScript中没有addClass/removeClass

---

您必须使用或直接操作

v.className

在普通JavaScript中没有addClass/removeClass

---

您必须使用或直接操作

v.className

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|$)'));
}

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|$)'));
}

最容易添加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>


功能切换（id）{
var v=document.getElementById（id）；
$（'#'+id）.toggleClass（“选定”）；
如果（v.style.display==''）{
v、 style.display='none'；
}否则{
v、 style.display=''；
}
}
最容易添加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>


功能切换（id）{
var v=document.getElementById（id）；
$（'#'+id）.toggleClass（“选定”）；
如果（v.style.display==''）{
v、 style.display='none'；
}否则{
v、 style.display=''；
}
}
试图用更少的代码来完成。它能做你需要它做的事

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>

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');
});

在这里查看它的工作情况：
尝试用更少的代码完成它。它能做你需要它做的事

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>

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');
});

看到它在这里工作：
使用
$（id）
别忘了包括jQuery，这可能会对你有所帮助，@BerkerYüceer你应该注意，这需要jQuery，而不是普通的JavaScript。@RandyMarsh这就是我在最后说的原因（“别忘了包括jQuery”）。。只要考虑到他已经尝试在代码中使用jQuery，这意味着他不需要“普通的JavaScript”。。我已经包括了jQuery-忘了提到这一点：/无论如何，它不适用于$（id）。toggleClass（“selected”）；但是，如果我使用$（“a”）。。。事情确实发生了。不幸的是，它会影响html中的所有a标记：）使用
$（id）
别忘了包括jQuery，这可能会对你有所帮助，@BerkerYüceer你应该注意，这需要jQuery，而不是普通的JavaScript。@RandyMarsh这就是我在最后说的原因（“别忘了包括jQuery”）。。只要考虑到他已经尝试在代码中使用jQuery，这意味着他不需要“普通的JavaScript”。。我已经包括了jQuery-忘了提到这一点：/无论如何，它不适用于$（id）。toggleClass（“selected”）；但是，如果我使用$（“a”）。。。事情确实发生了。遗憾的是，它会影响html中的所有a标记：）这将替换应用于该元素的任何其他类。这将替换应用于该元素的任何其他类。也许我做得不对，但如果我尝试此操作，它会将“selected”添加到
而不是。请你详细说明一下你是怎么做的好吗。感谢您到目前为止的输入。也许我做得不对，但如果我尝试一下，它会将“selected”添加到
中，而不是。请你详细说明一下你是怎么做的好吗。谢谢你到目前为止的投入。谢谢你的提示。几乎是c/p-able:）只需添加
$（window.load（function（）{…}）也欢迎使用较短的$（function（）{//jquery code here}）；谢谢你的提示。几乎是c/p-able:）只需添加
$（window.load（function（）{…}）也欢迎使用较短的$（function（）{//jquery code here}）；行得通