(如圖),希望畫面左邊的每一個連結的內容能顯示在右邊白底div區塊內。試過網路上各種方式,目前左下角紅色框框內的這兩個連結可以正常連(html會顯示在指定div區塊裡),但藍色框框內slide menu裡的連結卻都是一直會整張開新的頁面,無法將連結的頁面內容只顯示在指定div中。
html:
<meta charset="utf-8" />
<title>Portfolio-Phoebe Yu</title>
<link rel="stylesheet" href="css/index.css" />
<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
<script src="js/jquery.lksMenu.js"></script>
<script type="text/JavaScript">
$(document).ready(function(){
$.get("about.html",function(data){ //初始將a.html include div#iframe
$("#iframe").html(data);
});
$(function(){
$('.gi').click(function() {
var $this = $(this),
_clickTab = $this.find('a').attr('href');
$.get(_clickTab,function(data){
$("#iframe").html(data);
});
return false
})
})
});
</script>
<script>
$('document').ready(function(){
$('.menu').lksMenu();
});
</script>
<div id="left">
<div class="menu">
<ul>
<li>
<a href="#">Digital</a>
<ul class="active">
<li class="gi"><a href="digital01.html">FirstBank eventsite 2014 Spring</a></li>
<li class="gi"><a href="about.html">FirstBank eventsite 2013 Winter</a></li>
<li class="gi"><a href="contact.html">FirstBank eventsite 2012</a></li>
<li class="gi"><a href="contact.html">FirstBank eventsite 2012</a></li>
<li class="gi"><a href="contact.html">FirstBank eventsite 2012</a></li>
</ul>
</li>
<li>
<a href="#">Print</a>
<ul>
<li class="gi"><a href="about.html">Letras</a></li>
<li class="gi"><a href="contact.html">Cheats Code</a></li>
<li class="gi"><a href="contact.html">Solving</a></li>
</ul>
</li>
<li>
<a href="#">Artifacts</a>
<ul>
</ul>
</li>
<li>
<a href="#">Others</a>
<ul>
</ul>
</li>
</ul>
</div>
<div id="link02">
<ul class="ab">
<li class="gi"><a href="about.html">About</a></li>
<span>|</span>
<li class="gi"><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
<div id="iframe">
</div>
slide menu的Jquery:
(function($){
$.fn.lksMenu=function(){
return this.each(function(){
var menu= $(this);
menu.find('ul li ul.active').slideDown('medium');
menu.find('ul li > a').bind('click',function(event){
var ahref = $(event.currentTarget).attr('href');
if(ahref!='#'){
window.location.href = ahref;
}else{
var currentlink=$(event.currentTarget);
if (currentlink.parent().find('ul.active').size()==1)
{
currentlink.parent().find('ul.active').slideUp('medium',function(){
currentlink.parent().find('ul.active').removeClass('active');
});
}
else if (menu.find('ul li ul.active').size()==0)
{
show(currentlink);
}
else
{
menu.find('ul li ul.active').slideUp('medium',function(){
menu.find('ul li ul').removeClass('active');
show(currentlink);
});
}
}
});
function show(currentlink){
currentlink.parent().find('ul').addClass('active');
currentlink.parent().find('ul').slideDown('medium');
}
});
}
})(jQuery);
所以你是要下面那一段slide menu可以改成跟上面一樣?簡單說就是把上面那一段的13~15行移植取代掉下面這一段程式的第9行。知道這幾行在做什麼的話,應該就沒太大問題。