-1

我正在尝试建立一个网站，当我点击 1 年级、2 年级等按钮时，它会在我的 div“结果”中加载一个页面。每次我单击同一页面上的按钮或 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>
4

1 回答 1

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);
        });
    });

网页部分

<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>
于 2013-06-06T07:51:08.253 回答