在菜單項上點擊顯示div's

我正在一個只有一個頁面的網站上工作，而不是爲不同的內容位加載不同的頁面;我希望內容改變，但不是頁面，因此減少加載和創建一個很好的效果。在菜單項上點擊顯示div's

正如你從我的下面的代碼中可以看到它很長，但它的工作原理，我相信有一個更簡單的方法來做和動畫之間的divs。

HTML

<ul class="side-nav" id="sideNav"> 
    <li id="homeNav"><a href="#">Home</a></li> 
    <li id="bioNav"><a href="#">Biography</a></li> 
    <li id="musicNav"><a href="#">Music</a></li> 
    <li id="photosNav"><a href="#">Photos</a></li> 
    <li id="shopNav"><a href="#">Shop</a></li> 
</ul> 
<div id="homePage"> 
    <p>HOME PAGE</p> 
</div> 
<div id="biogPage"> 
    <p>BIOG PAGE</p> 
</div> 
<div id="musicPage"> 
    <p>MUSIC PAGE</p> 
</div> 
<div id="photosPage"> 
    <p>PHOTOS PAGE</p> 
</div> 
<div id="shopPage"> 
    <p>SHOP PAGE</p> 
</div>

$('#biogPage').hide(); 
$('#musicPage').hide(); 
$('#photosPage').hide(); 
$('#shopPage').hide(); 

$('#homeNav').click(function() { 
    $('#homePage').show(); 
    $('#biogPage').hide(); 
    $('#musicPage').hide(); 
    $('#photosPage').hide(); 
    $('#shopPage').hide(); 
}); 

$('#bioNav').click(function() { 
    $('#homePage').hide(); 
    $('#biogPage').show(); 
    $('#musicPage').hide(); 
    $('#photosPage').hide(); 
    $('#shopPage').hide(); 
}); 

$('#musicNav').click(function() { 
    $('#homePage').hide(); 
    $('#biogPage').hide(); 
    $('#musicPage').show(); 
    $('#photosPage').hide(); 
    $('#shopPage').hide(); 
}); 

$('#photosNav').click(function() { 
    $('#homePage').hide(); 
    $('#biogPage').hide(); 
    $('#musicPage').hide(); 
    $('#photosPage').show(); 
    $('#shopPage').hide(); 
}); 

$('#shopNav').click(function() { 
    $('#homePage').hide(); 
    $('#biogPage').hide(); 
    $('#musicPage').hide(); 
    $('#photosPage').hide(); 
    $('#shopPage').show(); 
});

來源

2013-05-13 George Reason

嘗試包父DIV中所有的div：

<div id="wrapper"> 
    <div id="homePage"><p>HOME PAGE</p></div> 
    <div id="biogPage"><p>BIOG PAGE</p></div> 
    <div id="musicPage"><p>MUSIC PAGE</p></div> 
    <div id="photosPage"><p>PHOTOS PAGE</p></div> 
    <div id="shopPage"><p>SHOP PAGE</p></div> 
</div>

然後你就可以把你的清單指數的優點根據div元素顯示：

$(document).ready(function(){ 

    $('#biogPage, #musicPage, #photosPage, #shopPage').hide(); 

    $(".side-nav li").each(function(i) { 
     $(this).click(function() { 
      $("#wrapper").find("div:eq('" + i + "')").show().siblings().hide(); 
     }); 
    }); 
});

Updated Fiddle

來源

2013-05-13 03:45:17 Eli

另一個改變你的HTML儘可能少的方式：

HTML：

<ul class="side-nav" id="sideNav"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Blog</a></li> 
    <li><a href="#">Music</a></li> 
</ul> 

<div id="home" class="page"><p>HOME PAGE</p></div> 
<div id="blog" class="page"><p>BLOG PAGE</p></div> 
<div id="music" class="page"><p>MUSIC PAGE</p></div>

的Javascript：

$(document).ready(function(){ 
    var hideall = function() { 
     $(".page").each(function() { 
      $(this).hide(); 
     }); 
    }; 
    hideall(); 

    $(".side-nav li a").each(function() { 
     $(this).click(function() { 
      var ta = $(this).text().toLowerCase(); 
      hideall(); 
      $("#"+ta).show(); 
     }); 
    }); 


});

來源

2013-05-13 03:39:52

HTML

<a class="link" title="div1" href="#">link1</a> 
<a class="link" title="div2" href="#">link2</a> 
<a class="link" title="div3" href="#">link3</a> 
<a class="link" title="div4" href="#">link4</a> 
<div class="clearfix"> 
    <div id="div1" class="box">div1</div> 
    <div id="div2" class="box">div2</div> 
    <div id="div3" class="box">div3</div> 
    <div id="div4" class="box">div4</div> 
</div>

CSS

.clearfix：後{ 內容：; 「」 display：block; 明確：均; 知名度：隱藏; line-height：0; 身高：0; }

.clearfix {display：inline-block; }

html [xmlns] .clearfix { display：block; }

html .clearfix { height：1％; } 。框顯示：塊; padding：25px; background-color：#ccc; border：1px solid＃333; float：left; margin-right：5px; }

最小化的JavaScript

(function() { 
    $('.link').click(function(e) { 
     $('.box').hide(); 
     $('#' + $(this).attr('title')).show(); 
     e.preventDefault(); 
    }); 
})();

我覺得這個JavaScript可能是最起碼的一個

支票本的jsfiddle http://jsfiddle.net/bqBaA/

投票了，如果ü喜歡這個

來源

2013-05-13 04:00:38

在菜單項上點擊顯示div's

回答

相關問題