【发布时间】：2015-07-11 15:56:53
【问题描述】：
我编写了一个 jquery ajax 脚本来通过 ajax 动态加载页面，而无需重新加载页面。下面是我的导航菜单，里面有 5 个链接。
<nav>
<ul id='menu' class="menu-items">
<li><a href="#Browse_Page1" class="albums active" id="page1-link"><i class="arcd-archive"></i></br>Browse</a></li>
<li><a href="#Top_albums_Page1" class="pages" id="page2-link"><i class="arcd-music97"></i></br>Top albums</a></li>
<li><a href="#Top_artists_Page1" class="albums" id="page3-link"><i class="arcd-microphone52"></i></br>Top artists</a></li>
<li><a href="#Top_lists_Page1" class="pages" id="page4-link"><i class="arcd-numbered8"></i></br>Top lists</a></li>
<li><a href="#Charts_Page1" class="pages" id="page4-link"><i class="arcd-rising9"></i></br>Charts</a></li>
</ul>
</nav>
这是分别加载导航菜单“#Browse_Page1”“#Top_albums_Page1”的前两页的jquery ajax。
<script>
$(function() {
$('header nav a').on('click', function() {
var linkClicked = $(this).attr('href');
if(linkClicked.indexOf('Browse_Page') == true)
{
var $Browse_PageRoot = linkClicked.replace('#Browse_Page', '');
if (!$(this).hasClass("active")) {
$("header nav a").removeClass("active");
$(this).addClass("active");}
$('#loading').css('visibility','visible');
$.ajax({
type: "POST",
url: "load.php",
data: 'Browse_Page='+$Browse_PageRoot,
dataType: "html",
success: function(msg){
if(parseInt(msg)!=0)
{
$('#main-content').html(msg);
$('#loading').css('visibility','hidden');
$('#main-content section').hide().fadeIn();
}
}
});
}
else
{
var $Top_albums_PageRoot = linkClicked.replace('#Top_albums_Page', '');
if (!$(this).hasClass("active")) {
$("header nav a").removeClass("active");
$(this).addClass("active");}
$('#loading').css('visibility','visible');
$.ajax({
type: "POST",
url: "load2.php",
data: 'Top_albums_Page='+$Top_albums_PageRoot,
dataType: "html",
success: function(msg){
if(parseInt(msg)!=0)
{
$('#main-content').html(msg);
$('#loading').css('visibility','hidden');
$('#main-content section').hide().fadeIn();
}
}
});
}
});
});
</script>
最后是上面jquery ajax函数“load.php”和“load2.php”使用的两个php文件
<!--load.php-->
<?php
if(!$_POST['Browse_Page']) ;
$page = (int)$_POST['Browse_Page'];
if(file_exists('Browse/Browse_Page'.$page.'.html'))
echo file_get_contents('Browse/Browse_Page'.$page.'.html');
else echo 'There is no such page!';
?>
<!--load2.php-->
<?php
if(!$_POST['Top_albums_Page']) die("0");
$page = (int)$_POST['Top_albums_Page'];
if(file_exists('Top-albums/Top_albums_Page'.$page.'.html'))
echo file_get_contents('Top-albums/Top_albums_Page'.$page.'.html');
else echo 'There is no such page!';
?>
我的站点文件夹结构如下。
- 浏览
- 热门专辑
- *艺术家
- 热门列表
- 图表
所以我的问题是，正如我上面所说，jquery ajax 函数从两个不同的目录加载两个不同的页面，它工作正常，但我在导航菜单中有 5 个页面链接，所有页面都在不同的目录中，5 个不同的目录！但是这个功能只支持两个目录。 我尝试添加更多 if else 语句来满足我的愿望，但它没有用。因为我是 jquery 的新手，所以我可能做错了！ 或者有什么方法可以将其转换为 switch 语句？ 任何帮助将不胜感激。谢谢
【问题讨论】：
标签： javascript php jquery html ajax