iT邦幫忙

0

連結html頁面到指定div內

kusabi 2013-12-03 21:10:4319310 瀏覽

(如圖),希望畫面左邊的每一個連結的內容能顯示在右邊白底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);
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

4
fillano
iT邦超人 1 級 ‧ 2013-12-04 09:47:07
最佳解答

所以你是要下面那一段slide menu可以改成跟上面一樣?簡單說就是把上面那一段的13~15行移植取代掉下面這一段程式的第9行。知道這幾行在做什麼的話,應該就沒太大問題。

kusabi iT邦新手 5 級 ‧ 2013-12-04 10:22:27 檢舉

window.location.href = ahref;

成功了~感謝~ ^^

我要發表回答

立即登入回答