<!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：”来防止在点击链接时加载页面。
你们有资格告诉我是否需要改进吗？
答案 0 :(得分：0)
无需在每个标签上添加相同的类名。只需使用$（“＃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/