各位大大好:
想請問在同一個框架(選單、背景都一樣)要怎麼載入不同網頁呢? 謝謝
我現在寫得只能點一個連結,再點第二個連結就不能動..
<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);
}
});
});
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);
}
});
}
});
額外加分