Question

我有一个或多个列表，一旦你点击某个列表项（即在这个例子中，是最后一个列表项），我想在div中添加一个类。

以下代码示例：

        <ul class="tier-1"> 
            <li class="first"> 
                 <a href="/">HOME</a> 
            </li> 
            <li>
                 <a href="">SECTIONS</a> 
            </li> 
            <li class="Login Nav Link last"> 
                 <a href="#login" class="Logi Nav **Link**">LOGIN</a> 
            </li> 
        </ul>
        <div class="nav-login"></div>

单击“登录”链接，div“nav-login”应添加“show”类。

注意：我无法更改加价。

Answer 1

试试这个：

<li class="Login Nav Link last"> 
    <a href="#login" class="Login Nav Link" onclick="toggle()">LOGIN</a> 
</li>

<div id="nav-login"></div>

<script>
function toggle(){
    var div1 = document.getElementById('nav-login')
    if (div1.style.display == 'none') {
        div1.style.display = 'block'
    } else {
        div1.style.display = 'none'
    }
}
</script>

请注意，对于此方法，您需要将class =“nav-login”更改为id =“nav-login”

Answer 2

这应该适用于您的标记。你可能不应该依赖抓住最后一个元素，这只是为了保持答案简短。您应该检查元素类名。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <script language="javascript" type="text/javascript">
        window.onload = function() {
            var links = document.getElementsByTagName("a");
            links[links.length-1].onclick = function () {
                var divs = document.getElementsByTagName("div");
                divs[divs.length-1].className += " show";
            }
        }
        </script>
    </head>
    <body>
        <ul class="tier-1">
            <li class="first">
                <a href="/">HOME</a>
            </li>
            <li>
                <a href="">SECTIONS</a>
            </li>
            <li class="Login Nav Link last">
                <a href="#login" class="Login Nav Link">LOGIN</a>
            </li>
        </ul>
        <div class="nav-login"></div>
    </body>
</html>

Javascript单击特定链接并显示div（没有jQuery）

2 个答案: