0

我正在一个只有一个页面的网站上工作，而不是为不同的内容加载不同的页面；我希望内容改变，而不是页面，因此减少加载并创造一个很好的效果。

正如您从我下面的代码中看到的那样，它很长，但它有效，我相信有一种更简单的方法可以做到这一点并在 div 之间设置动画。

http://jsfiddle.net/ssLY3/

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>

JS

$('#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();
});
4

3 回答 3

3

尝试将所有 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();
        });
    }); 
});

更新小提琴

于 2013-05-13T03:45:17.700 回答
1

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:after { 内容：“。”；显示：块；明确：两者；可见性：隐藏；行高：0；高度：0；}

.clearfix { 显示：内联块；}

html[xmlns] .clearfix { 显示：块；}

  • html .clearfix { 高度：1%; } .box { 显示：块；填充：25px；背景颜色：#ccc；边框：1px 实心 #333; 向左飘浮; 右边距：5px；}

最小化的 JavaScript

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

我认为这个 javascript 可能是最小的一个

检查这个jsfiddle http://jsfiddle.net/bqBaA/

如果你喜欢这个，请投票

于 2013-05-13T04:00:38.983 回答
0

另一种尽可能少地更改 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-13T03:39:52.853 回答