Question

我正在一个只有一个页面的网站上工作，而不是为不同的内容加载不同的页面;我想要更改内容而不是页面因此减少加载并创建一个很好的效果。

从下面的代码中我可以看到它很长但是它有效，我相信有一种更简单的方法来实现它并在div之间制作动画。

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();
});

Answer 1

尝试将所有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

Answer 2

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 { 内容：“。”; 显示：块; 明确：两者; 能见度：隐藏; line-height：0; 身高：0; }

.clearfix { display：inline-block; }

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

html .clearfix { 身高：1％; } .box { 显示：块; 填充：25px; background-color：#ccc; 边框：1px solid＃333; 向左飘浮; 保证金权利：5px; }

最小化javascript

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

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

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

如果你喜欢这个

就投票了

Answer 3

另一种尽可能少地更改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();
        });
    });


});

在菜单项上单击显示div

3 个答案: