Heim  >  Fragen und Antworten  >  Hauptteil

javascript - js做下拉列表的一些疑问

看书中,遇到了不明白的地方:html的p中对于链接menu1.html,当onclick动作发生时,是转到新的页面吗,如果是的话,是否还得做一个menu1.html的页面来保证操作的完成?[ps:怕不明白,把代码都贴出来了,谢谢你们的耐心!]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Shakespeare's Plays</title>
    <link rel="stylesheet" type="text/css" href="slide_menu.css">
    <script src="slide_menu.js"></script>
</head>
<body>
    <h1>Shakespware's Plays </h1>
    <p>
        <a href="menu1.html" class= 'menuLink'>Music</a>
        <ul class='menu' id='menu1'>
            <li><a href="pg1.html">dida.dida</a></li>
            <li><a href="pg2.html">tuli.tuli</a></li>
            <li><a href="pg2.html">poli.poli</a></li>
        </ul>

    </p>
</body>
</html>

ul.menu {

display: none;
list-style-type: none;
margin-top: 10px;

}


window.onload = initAll;

function initAll () {

var allLinks = document.getElementsByTagName('a');
for (var i = 0; i < allLinks.length; i++) {
    if(allLinks[i].className.indexOf('menuLink')>-1){
        allLinks[i].onclick = toggleMenu;
    }
}

}

function toggleMenu () {

var startMenu = this.href.lastIndexOf('/')+1;
var stopMenu = this.href.lastIndexOf('.');

var thisMenuName = this.href.substring(startMenu,stopMenu);
var thisMenu = document.getElementById('thisMenuName').style;

if(thisMenu.display == 'block'){
    thisMenu.display = 'none';

}
else{
    thisMenu.display = 'block';
}
return false;

}

天蓬老师天蓬老师2771 Tage vor386

Antworte allen(2)Ich werde antworten

  • 阿神

    阿神2017-04-10 16:05:24

    1,你的目的是做下拉列表,应该是防止跳转而相应事件显示下拉列表,应该是要阻止a标签的默认跳转行为
    2,通过在onclick事件响应中添加 return false;可以防止链接跳转。
    3,当然实现阻止a标签默认行为的方法不止这一种,比如:

    1.在onclick事件中调用这个函数

    function preventDefault(e){
      if(e.preventDefault){
        e.preventDefault();
      }else{
        window.event.returnValue=false;
      }
    }

    2.a标签中的href设置成javascript:void(0)

    4,这里的menu1.html有没有没有关系,不用担心

    以上是我个人理解,不对的地方请指正

    Antwort
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-10 16:05:24

    你要天转到其他页面的话肯定要有一个新的页面,如果不想跳转到新页面,仅仅只想完成onclick事件函数的话就在函数里加return false

    Antwort
    0
  • StornierenAntwort