Question

您好我想知道侧边栏如何在这个网站上运行：http://www.checkoutapp.com/features/

如果您点击不同的功能（销售，管理等），它不会重新加载页面，并在向下滚动时保持当前页面高度。我看到它是一些隐藏/显示div的JavaScript。我想知道这是不是很复杂，或者它是否非常简单。如果它非常复杂，请告诉我，不要打扰输入一些巨大的长代码。也许只是告诉我这是什么叫做什么，我可以去谷歌吧。

Answer 1

这很有可能。假设点击功能调用函数loadDiv：

function loadDiv(divId){
    document.getElementById(currentDivId).style.visbility = "hidden";
    document.getElementById(divId).style.visbility = "visible";
}

但这是假设所有div都位于完全相同的位置，这很难做到，甚至更难维护。我建议你做的是检索你想要显示的数据使用AJAX（jQuery使其非常easy），然后更新div的内容。

Answer 2

以下是您希望仅使用jQuery，一类CSS和几行HTML实现的简约示例：

<强> HTML ：

<div id="foo_block" class="pos" style="display:block;">
foo
</div>
<div id="bar_block" class="pos">
bar
</div>
<div id="baz_block" class="pos">
baz
</div>
<div id="grok_block" class="pos">
grok
</div>
<br />
<a id="foo" href="#">foo</a> 
<a id="bar" href="#">bar</a> 
<a id="baz" href="#">baz</a> 
<a id="grok" href="#">grok</a>

<强>的Javascript ：

// display the dividers when their individual hyperlinks are clicked
$("a").click(function() {
    $(".pos").each(function() {
        $(this).css("display", "none");
    });
    $("#" + $(this).attr("id") + "_block").css("display", "block");
});

<强> CSS ：

/* We hide the individual dividers and load them in absolute positions (so they overlap) */
.pos {
    position:absolute;
    display:none;    
}

JSFiddle ：http://jsfiddle.net/JkK53/

享受并祝你好运！

更改网站中启用的div而不重新加载页面（描述中的具体示例）

2 个答案: