Javascript点击一个特定的链接并显示div（没有jQuery）

-1

我有一个列表或项目，我想添加一个类到一个div，一旦你点击某个列表项目（即在这个例子中，最后一个列表项目）。Javascript点击一个特定的链接并显示div（没有jQuery）

代码示例如下：

 <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“导航登录”应该添加类“秀”。

注意：我无法更改标记。

来源

2011-05-18 calebo

到目前为止，您是否有任何JavaScript代码？ – John 2011-05-18 07:22:22

-1，因为你没有提供足够的细节给人们给你一个合理的答案。 – slugster 2011-05-18 08:02:05

试试这个：

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

注意，对于这个方法，你需要改变类=“导航登录”进入ID =“导航登录”

来源

2011-05-18 07:22:12

也许应该将链接的切换功能挂钩？ – ADW 2011-05-18 07:24:04

我认为你误解了我的问题。问题是具有相同类名'链接'的2个元素，并且我需要针对与类“链接”相关的超链接的点击或目标最后列表项的超链接。然后用类名“nav-login”切换div，并且我无法将该类更改为div上的ID。 – calebo 2011-05-18 07:24:40

可能很重要的一点是，在将click方法添加到锚点之前，您需要等待DOM做好准备。 – peterp 2011-05-18 07:25:20

这应该与您的标记工作。你可能不应该依靠抓住最后一个元素，那就是保持答案的简短。您应该检查元素类名。

<!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>

来源

2011-05-18 07:31:25 jopke

我刚刚在下面看到您的评论，我会更新我的回答 – jopke 2011-05-18 07:34:02

我不允许编辑加价。 – calebo 2011-05-18 07:34:56

我必须跑步。在你的JavaScript你应该能够做document.getElementsByTagName（“a”）来获取页面上的所有锚点并绑定click事件。一旦你完成了，做同样的事情来获得div并添加类。 – jopke 2011-05-18 07:50:42

Javascript点击一个特定的链接并显示div（没有jQuery）

回答

相关问题