Question

我正在尝试构建一个网站，当我点击1年级，2年级等按钮时，它会在我的div“结果”中加载页面。这是每次我点击同一页面上或按钮容器“结果”内的按钮时加载的不同网站内容。我的代码如下。我试图使用jQuery，但我是新手。

<html>
    <head>
        <script>
            $(document).ready(function() {
                $("#target").click(function(e) {
                    $('#result').load('http://www.youtube.com/user/EduGrade1');
                    e.preventDefault();
                });
            });</script>
    </head>
    <body>
        <div id="div1">
            <ul>
                <li><a href="Grade.html"> CBSE Grades (1 to 12)</a>

                    <ul id="menu">
                        <li><a href "http://www.youtube.com/user/EduGrade1" id="target"> Grade 1 </a>
                        </li>
                        <li><a href "http://www.youtube.com/user/EduGrade2"> Grade 2 </a>
                        </li>
                        <li><a href "#"> Grade 3 </a>
                        </li>
                        <li><a href "#"> Grade 4 </a>
                        </li>
                        <li><a href "#"> Grade 5 </a>
                        </li>
                        <li><a href "#"> Grade 6 </a>
                        </li>
                        <li><a href "#"> Grade 7 </a>
                        </li>
                        <li><a href "#"> Grade 8 </a>
                        </li>
                        <li><a href "#"> Grade 9 </a>
                        </li>
                        <li><a href "#"> Grade 10 </a>
                        </li>
                        <li><a href "#"> Grade 11 </a>
                        </li>
                        <li><a href "http://www.youtube.com/user/EduGrade12"> Grade 12 </a>
                        </li>
                    </ul>
                </li>
            </ul>
            <div>
                <div id="div2">
                    <ul>
                        <li><a href="Home.html">Home</a>
                        </li>
                    </ul>
                </div>
                <p>&nbsp; </p>
                <div id="result">
                    <script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/youtube.xml&up_channel=EduGrade12&synd=open&w=480&h=340&title=&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>
                </div>
                </body>

Answer 1

你可以做这样的事情

Javascript代码

$(document).ready(function() {
        $(".target").click(function(e) {
            var url = $(this).attr("link");
            $('#result').load(url, function(response, status, xhr) {
                  if (status == "error") {
                        var msg = "Sorry but there was an error: ";
                        $("#result").html(msg + xhr.status + " " + xhr.statusText);
                  }
            });
        });
    });

HTML代码，但请注意，这些网页必须位于同一个网域，您无法使用此方法加载跨网域，而是可以打开跨域网页，而不是使用iframe。

 <ul id="menu">
            <li class="target" style="cursor:pointer" link="page1.html">
                    Grade 1 </li>
            <li class="target" style="cursor:pointer" link="page2.html">
                    Grade 2 </li>       
        </ul>   
        <div id="result" style="width:500px;height:500px;border:1px solid #000;"></div>

以下是使用Iframe的代码段

Javascript代码

$(document).ready(function() {
        $(".target").click(function(e) {
            var url = $(this).attr("link");
            $('#resultFrame').attr("src",url);
        });
    });

Html Part

<ul id="menu">
        <li class="target" style="cursor:pointer" link="http://www.iotasol.com">
                Grade 1 </li>       
    </ul>   
    <div id="result" style="width:500px;height:500px;border:1px solid #000;"><iframe id="resultFrame" style="width:100%;height:100%"></iframe></div>

JavaScript在同一容器中加载不同的网页

1 个答案: