滑動的div導航

我正在上有聯繫的左側和右側的內容區域的站點。我想獲得它進出使用jquery喜歡這個網站幻燈：http://www.templatemonster.com/demo/44960.html 滑動的div導航

這是我當前的代碼（？能拿jFiddle工作）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<style> 
body { 
     /**background-image: url(../img/bg.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
     **/ 
     background-color: red; 
     background-image: url(img/bg.jpg); 
     font-family:Arial, Helvetica, sans-serif; 
     height: 100%; margin: 0; width: 100%; 
} 
html,body { height:100%; } 
#left { 
    position: relative; 
    margin: 0 5px 0 0; 
    overflow: hidden; 
    float: left; 
    width: 220px; 
    background-image: url(img/panel_bg.png); 
    background-repeat: repeat-y; 
    height: 100%; 
} 
#right { 
    position: relative; 
    float: left; 
    margin: 0 5px 0 0; 
    width: 630px; 
    height: 100%; 
    overflow: hidden; 
} 

div.panel { 
    position: absolute; 
    float: left; 
    height: 100%; 
    width: 620px; 
    margin-left: 10px; 
    background-image: url(img/content_bg.png); 
    background-repeat: repeat-y; 
    display: none; 
} 
</style> 
<script type="text/Javascript"> 
jQuery(function($) { 

    $('a.panel').click(function() { 
     var $target = $($(this).attr('href')), 
      $other = $target.siblings('.active'); 

     if (!$target.hasClass('active')) { 
      $other.each(function(index, self) { 
       var $this = $(this); 
       $this.removeClass('active').animate({ 
        left: $this.width() 
       }, 500); 
       $($target).hide(); 
      }); 

      $target.addClass('active').show().css({ 
       left: -($target.width()) 
      }).animate({ 
       left: 0 
      }, 500); 

     } 
    }); 

}); 
</script> 
</head> 

<body> 
<div id="left"> 
    <a href="#target1" class="panel">Target 1</a><br/> 
    <a href="#target2" class="panel">Target 2</a><br/> 
    <a href="#target3" class="panel">Target 3</a><br/> 
</div> 

<div id="right"> 
    <div class="panel" id="target1">Target 1</div> 
    <div class="panel" id="target2">Target 2</div> 
    <div class="panel" id="target3">Target 3</div> 
</div> 
</body> 
</html>

任何幫助，將不勝感激！

來源

2013-06-12 Stian Instebo

問題是什麼？ –

我怎樣才能讓它像我鏈接到的網站？礦山只有滑過海誓山盟，並且不出來的權利，並從左側或VERS反之亦然 –

http://jsfiddle.net/T7LzN/這裏是你的代碼的jsfiddle。如果我弄清楚什麼，我會將其作爲答案發布。 –

我有updated your code獲取內容滑動進出。我改變了一些樣式，使它在jsfiddle中看起來更清晰一些，因爲我沒有背景圖片。

我改變你的jQuery變量開頭（個人喜好），不使用$但除此之外，它是一樣的。我刪除了你的鏈接上的「面板」類，並改變了在左側和右側div上設置浮動的方式。

<a href="#target1">Target 1</a><br/>

來源

2013-06-12 17:30:47

這打破了後退按鈕。澄清。如果我點擊目標1，然後瞄準2，然後瞄準3。然後回擊一些內容重疊。 –

是的，Stian可能需要在他的javascript代碼中處理這種情況。他鏈接的網站根本不支持後退按鈕。 –

我得到它的工作幾乎是打算與一些CSS改變。我只是用在滑區position:fixed菜單上，和position:absolute。我改變了幻燈片上的背景顏色以確保它正常工作。我沒有碰你的jQuery。 http://jsfiddle.net/T7LzN/2/

來源

2013-06-12 17:28:18

滑動的div導航

回答

相關問題