ajax 載入不同網頁

javascript ajax html

mayyola 2019-02-15 09:23:40 ‧ 4441 瀏覽

分享至

各位大大好:

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

<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邦好手 1 級 ‧ 2019-02-15 09:48:12 檢舉

你的 <a> 的 id 重覆了

mayyola iT邦研究生 1 級 ‧ 2019-02-15 11:12:24 檢舉

謝謝你~~

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

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

額外加分