用jquery跳转菜单

时间:2016-06-28 16:30:24

标签: javascript jquery html menu

我正在编辑一个现有网站,该网站有一个链接菜单,可以将页面中的内容加载到某些链接的DIV中,然后转到其他网站的其他URL。现在,客户希望将其中一个链接(例如:加载到DIV中的页面)放到显示移动设备的跳转菜单上。

链接菜单和跳转菜单工作,但跳转菜单不适用于page2的示例,我们希望将内容加载到DIV中,同时保持其他页面转到URL。

菜单如下所示:

<div id="mainmenu">
<ul>
<li><a href="page1" id="1">Page One</a></li>
<li><a href="#" id="2">Page Two</a></li>
<li><a href="page3" id="3">Page Three</a></li>
</ul>
</div>

<form name="mobilemenu" id="mobilemenu">
     <select id="mobile-jump-menu" name="mobile-jump-menu" onchange="MM_jumpMenu('parent',this,0)">
<option value="Menu" selected="selected">Menu</option>
<option value="page1">Page One</option>
<option value="loadpage2">Page Two</option>
<option value="page3">Page Three</option>
</select>
</form>  

<script type="text/JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}

$("#2").click(function() {
        $("#content-box").load('content/page2');
        return false;
});


$(function() {
$('#mobile-jump-menu').change(function(){
if($('#mobile-jump-menu').val() == 'loadpage2') { 
    $("#content-box").load('content/page2');
}
});
});

-->
</script>

跳转菜单中的Page2不起作用,我认为因为它试图运行两个冲突的脚本....内容必须加载到DIV中,所以我需要找到如何做到这一点只是跳转菜单上的一个链接:(

1 个答案:

答案 0 :(得分:0)

尝试修改MM_jumpMenu函数并在其中添加if条件,但尚未对代码进行测试但应该有效。

<script type="text/JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0

 if(selObj.options[selObj.selectedIndex].value =="loadpage2"){
     $("#content-box").load('content/page2');
 }else{
    eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
 }

if (restore) selObj.selectedIndex=0;
}

$("#2").click(function() {
        $("#content-box").load('content/page2');
        return false;
});

-->
</script>