請教關於JQURRY...超連結DIV切換配置
小弟網頁初學者 最近接觸CSS+DIV切版中(整個版面已切好)
想諮詢大大
情境如下:
我切了兩個DIV 分別是#mainNav(做超連結選單) 跟#content (顯示點選後網頁內容區)
在#mainNav 我製作四個網頁按鈕: 按鈕一 ...按鈕四
現在我想配置 這四個按鈕Onclick皆可連依序接切換到不同網頁(p1.html ~ p4.html)
且顯示在#content 這個區塊內...請問是否有完整範例程式可供參考指示配置多個超連結顯示DIV,感恩
PS: 日前有參考這網頁=> http://www.mobile01.com/topicdetail.php?f=300&t=1120999 使用Load()
已邀請的邦友 {{ invite_list.length }}/5
如果你在Server環境中，兩個都會跑
如果你在本地端，Ajax version不會動，因為同源policy的問題。
兩個做法都可行，針對你的目的來說。
但是比較好奇的是，除非是基於練習的目的，不然把四個頁面透過這種方式載入的目的是什麼?? 直做成四頁不就好了??
<pre class="c" name="code">
<html lang="en">
<meta charset="UTF-8">
<title>load content</title>
<script type="text/javascript" src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
<ul id="nav">
<li><a href="load_01.html">link1</a></li>
<li><a href="load_02.html">link2</a></li>
<li><a href="load_03.html">link3</a></li>
</ul>
<h2>
Ajax version
</h2>
<div id="content">content container</div>
<h2>
iframe version
</h2>
<iframe src="load_01.html"></iframe>
<script type="text/javascript">
$(function(){
//取得載入內容的container
var $content = $('#content');
var $frame = $('iframe');
$('#nav a').click(function(e){
e.preventDefault();
var src = $(this).attr('href');
//Ajax versoin
$content.load(src);
//iframe version
$frame.attr('src',src);
})
})
</script>
感謝大大回覆...以前做網頁習慣使用不同框架間做超連結顯示切換@@"測試無frame使用DIV取代框架設計 一個選單DIV 內四個按鈕(配置超連結,這四頁內容不同)當onlick 時候 該指定超連結頁面可以show 在 #content(點第二個按鈕則切換可顯示不同內容一樣SHOW #content ...純粹想測試與DIV取代框架顯示頁面(以前使用框架可以設定target="某框架") 這純粹想測試如何設計,Thanks
若用 DIV 取代 iFrame
請參考下列教學
http://ucmic.blogspot.tw/2011/05/jqueryjquery-include-html.html
Good 0.0 大大剛測試此法的確可行!!
chaconx提到：
JQURRY
用"JQURRY"...這個字應該找不到可以完整範例程式可供參考~
因為他叫 jQuery
<pre class="c" name="code">
<ul id='mainNav'>
<li class='menu' rel='content1'>menu1</li>
<li class='menu' rel='content2'>menu2</li>
</ul>
<div id='content'>
<div id='content1'>........</div>
<div id='content2'>........</div>
</div>
<script>
$(function(){
$('.menu').click(function(){
var dom = $(this).attr('rel');
$('#content').children('div'),hidden();
//ajax load page into content
$('#'+dom).show();
})
})
</script>
概念說明：
iThome鐵人賽
看影片追技術