iT邦幫忙

4

ajax 載入不同網頁

各位大大好:

想請問在同一個框架(選單、背景都一樣)要怎麼載入不同網頁呢? 謝謝
我現在寫得只能點一個連結,再點第二個連結就不能動..

<div class="box">
<h3 class="ch title1"><font style="background-color:yellow">一般資訊</font></h3>
<ul class="list">
<li class="first"><a href="Javascript:void(0);" id="reslink" class="index2.html">最新消息</a></li>
<li><a href="Javascript:void(0);" id="reslink" class="information.html">大會資訊</a></li>></li>
</ul>
</div>
<div id="content">
<div class="mainbox"></div>
<br class="clearfix" />
</div>

jquery


$(document).ready(function(){
 $.ajax({
        type: "GET",
        url: "index2.html",
        data: { },
        success: function(data){
            $('.mainbox').html(data);
        }
    });
});

$('#reslink').click(function(e){
 e.preventDefault();
 $.ajax({
 type: "GET",
 url:  this.className,
 data: { },
 success: function(data){
 $('.mainbox').html(data);
        }
    });
});

DanSnow iT邦新手 5 級 ‧ 2019-02-15 09:48:12 檢舉
你的 <a> 的 id 重覆了
mayyola iT邦新手 3 級 ‧ 2019-02-15 11:12:24 檢舉
謝謝你~~

1 個回答

1
koei5113
iT邦新手 5 級 ‧ 2019-02-15 09:55:19
最佳解答

HTML 元素的 id 不應該重複設定,
在重複設定的情況下, Javascript 永遠只會撈取到第一個被設定的元素,
這也就是為什麼你只有第一個有反應。

<div class="box">
    <h3 class="ch title1"><font style="background-color:yellow">
        一般資訊</font>
    </h3>
<ul class="list">
    <li class="first">
        <a href="Javascript:void(0);" class="自訂classname" data-url="index2.html">
            最新消息
        </a>
    </li>
    <li>
        <a href="Javascript:void(0);" class="自訂classname" data-url="information.html">
            大會資訊
        </a>
    </li>
    <!--你上面的範例這邊有錯誤的 tag 存在哦-->
</ul>
</div>
$(document).ready(function(){
 	$.ajax({
        type: "GET",
        url: "index2.html",
        data: { },
        success: function(data){
            $('.mainbox').html(data);
        }
    });
});

$('.自訂classname').click(function(e){
 	e.preventDefault();
    var url = $(this).data('url');
    if(url != '' && url !== undefined){
        $.ajax({
            type: "GET",
            url:  url,
            data: { },
            success: function(data){
                $('.mainbox').html(data);
            }
        });
    }
});

額外加分

  1. 你的 ajax 有更適合現代的寫法,例如不要再使用 success 而是使用 .done 等方式,詳細可參照 jquery 官網文件
mayyola iT邦新手 3 級 ‧ 2019-02-15 11:12:16 檢舉

謝謝你~~

我要發表回答

立即登入回答