这是为网站进行动态内容切换的好方法吗？ (JQUERY)答案

【问题标题】：Is this a good way of making dynamic content switching for a website? (JQUERY)这是为网站进行动态内容切换的好方法吗？ (JQUERY)
【发布时间】：2011-12-11 13:07:04
【问题描述】：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(document).ready(function(){
    $(".ContentLoader").click(function(){
        $.page = $(this).attr("goto");
        $("#content").slideToggle(500, function(){
            $(this).load("/pages/"+$.page+".php", function(){
                $(this).slideToggle(500);
            });
        });

    });

});
</script>

<style>
#menu{border: 2px solid black; padding: 5px; border-radius: 7px}
#menu a{background-color: skyblue; padding: 2px 20px 2px 20px}
#content{padding: 10px; background-color: silver; border: 2px solid black; border-radius: 7px; margin-top: 5px}
</style>

<body>

<div id="menu">
    <a href="javascript:" goto="default" class="ContentLoader">Main</a>
    <a href="javascript:" goto="contact" class="ContentLoader">Contact</a>
    <a href="javascript:" goto="default" class="ContentLoader">About</a>
    <a href="javascript:" goto="default" class="ContentLoader">Sign Up</a>
    <a href="javascript:" goto="default" class="ContentLoader">Partners</a>
</div>

<div id="content">
    hey
</div>

</body>

</html>

这是制作动态内容切换器的好方法吗？？？我还必须使用 href="javascript:" 来防止在单击链接时加载页面。

各位老手能告诉我是否需要改进吗？

【问题讨论】：

您正在为一些非常主观的答案敞开心扉，因为对于“这是一种好方法”可能没有一个正确的答案。

标签： jquery html navigation href

【解决方案1】：

无需在每个 at 标签上放置相同的类名。只需使用 $("#menu a")

goto 不是一个有效的属性。使用新的数据属性（http://ejohn.org/blog/html-5-data-attributes/）

<script>
$(document).ready(function(event){

    $("#menu a").click(function(){
        event.preventDefault();
        $.page = $(this).data("goto");
        $("#content").slideToggle(500, function(){
            $(this).load("/pages/"+$.page+".php", function(){
                $(this).slideToggle(500);
            });
        });

    });

});
</script>
<div id="menu">
    <a href="#default" data-goto="default">Main</a>
    <a href="#contact" data-goto="contact">Contact</a>
    <a href="#about" data-goto="default">About</a>
    <a href="#signup" data-goto="default">Sign Up</a>
    <a href="#Partners" data-goto="default">Partners</a>
</div>

在你的网址中使用锚点，然后使用 event.preventDefault(); 也可以看看http://tkyk.github.com/jquery-history-plugin/

【讨论】：