javascript - js做下拉列表的一些疑问
天蓬老师
天蓬老师 2017-04-10 16:03:24
0
2
359

看书中,遇到了不明白的地方: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;

}

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全部回覆(2)
阿神

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有没有没有关系,不用担心

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

伊谢尔伦

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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!