Question

获得下一个菜单：

<!DOCTYPE html>
    <html>
    <head>
    <script>
    function check(browser) {
        document.getElementById("answer").value=browser;
    document.getElementById("answerB").valueB=browser;
    }
    </script>
    </head>
    <body>
    
    <p>What's your favorite browser?</p>
    
    <form>
    <input type="radio" name="browser" onclick="check(this.value)"     value="400mb",  valueB="600mb">Internet Explorer<br>
    <input type="radio" name="browser" onclick="check(this.value)"     value="600mb",  valueB="700mb">Firefox<br>
    <input type="radio" name="browser" onclick="check(this.value)"     value="500mb",  valueB="500mb">Opera<br>
    <input type="radio" name="browser" onclick="check(this.value)"     value="500mb",  valueB="500mb">Google Chrome<br>
    <input type="radio" name="browser" onclick="check(this.value)"     value="300mb",  valueB="300mb">Safari<br>
    <br>
    PC Min Ram Requirement is: <input type="text" id="answer" size="20">
    Mac Min Ram Requirement is:  <input type="text" id="answerB" size="20">
    </form>
    
    </body>
    </html>

默认情况下打开网页的下一个div容器：

   <div id="mySidenav" class="sidenav">
     <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
     <a href="http://www.myweb1.com" id="menu">Web1</a>
     <a href="http://www.myweb2.com" id="menu">Web2</a>
     <a href="http://www.myweb3.com" id="menu">Web3</a>
     <a href="http://www.myweb4.com" id="menu">Web4</a>
   </div>

我想在您点击菜单选项时更改此默认主网页，因此我尝试了以下内容：

<div id="main"></div>

<script>
    $("#main")
        .html('<object data="http://www.myweb1.com"/>');
</script>

我是jquery的新手，对不起，如果这是一个明显的问题。

Answer 1

我创造了一个小提琴：https://jsfiddle.net/mh87cppx/

确保＆＃34;返回false＆＃34;在您的单击处理程序中，否则该站点可能会重新加同样如前所述，需要在您的点击处理程序中使用$（this）来获取对当前元素的引用以供比较。

$(document).on("click", ".menu", function(e) {
    if ($(this).text() == "Web1"){
        $("#main").html('"https://www.myweb1.com"');
    }
    if ($(this).text() == "Web2"){
        $("#main").html('"https://www.myweb2.com"');
    }
    if ($(this).text() == "Web3"){
        $("#main").html('"https://www.myweb3.com"');
    }
    if ($(this).text() == "Web4"){
        $("#main").html('"https://www.myweb4.com"');
    }
        return false;
});

Answer 2

id在DOM树中必须是唯一的，因此您必须更改id="menu" class="menu"以及javascript代码

<div id="mySidenav" class="sidenav">
     <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
     <a href="http://www.myweb1.com" class="menu">Web1</a>
     <a href="http://www.myweb2.com" class="menu">Web2</a>
     <a href="http://www.myweb3.com" class="menu">Web3</a>
     <a href="http://www.myweb4.com" class="menu">Web4</a>
</div>

<script>
$(document).on("click", ".menu", function(e) {
    /*$("#main").load("main.html");*/

    e.preventDefault()
    if ($(this).text() == "Web1"){
        $("#main").html('<object data="http://www.myweb1.com"/>');
    }
    if ($(this).text() == "Web2"){
        $("#main").html('<object data="http://www.myweb2.com"/>');
    }
    if ($(this).text() == "Web3"){
        $("#main").html('<object data="http://www.myweb3.com"/>');
    }
    if ($(this).text() == "Web4"){
        $("#main").html('<object data="http://www.myweb3.com"/>');
    }

});
</script>

还使用$(this)来保存触发侦听器的.menu元素。

单击菜单更改div html内容

2 个答案: