我最近正在创建一个博客站点，它基于php版本5.6。现在，我被困了一个多星期，以实现“在不刷新整个页面的情况下单击导航时ajax页面加载以及URL更改”。我遵循了来自stockoverflow和jQuery论坛的许多建议。我有dropdown菜单，也有dropdown-toggle数据属性。有时我的代码可以正常工作，但是dropdown和dropdown-toggle无法正常工作。谁能给我实现这一目标的方法。我只是ajax的初学者。这是我的代码。
header.php
<?php
require_once "../vendor/autoload.php";
include "../lib/Database.php";
include "../config/config.php";
include "../helpers/Format.php";
$fm= new Format();
$db = new Database();
$query ="SELECT * FROM `tbl_post` LIMIT 5";
$post = $db->select($query);
?>
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<?php include '../scripts/meta.php';?>
<?php include '../scripts/css.php';?>
<?php include "../scripts/js.php";?>
</head>
<style>
.row{
margin:0;
}
</style>
<body>
<!-- header starts -->
<header>
<section id="smedia">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 navbar-left">
<p><a href="../Template/contact.php">PHONE: 01971982959</a> </p>
</div>
<div class="col-sm-4">
<?php
$slgQuery = "SELECT * FROM `tbl_social` WHERE `id`= '1'";
$socialMedia = $db->select($slgQuery);
if($socialMedia )
{
while($socialResult = $socialMedia->fetch_assoc()) {
?>
<a href="<?php echo $socialResult['fb']; ?>" target = "_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a href="<?php echo $socialResult['tw']; ?>" target = "_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="<?php echo $socialResult['pin']; ?>" target = "_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
<a href="<?php echo $socialResult['gplus']; ?>" target = "_blank"> <i class="fa fa-google-plus" aria-hidden="true"></i></a>
<a href="<?php echo $socialResult['ln']; ?>" target = "_blank"> <i class="fa fa-linkedin" aria-hidden="true"></i></a>
<?php
}
}
?>
</div>
</div>
</div>
</section>
<!-- Navbar Starts -->
<div class="row">
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="../Template/index.php">
<?php
$slgQuery = "SELECT * FROM `title_slogan` WHERE `id`= '1'";
$getTitle = $db->select($slgQuery);
if($getTitle)
{
while($slgResult = $getTitle->fetch_assoc())
{
?>
<img src="../Dashboard/admin/<?php echo $slgResult['logo'];?>" alt="logo" class="img-responsive">
<?php
}
}
?>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<?php
$path = $_SERVER['SCRIPT_FILENAME'];
$currentPage = basename($path,'.php');
?>
<li <?php if($currentPage == 'index'){echo 'class ="active"';}?>><a href="../Template/index.php">Home <span class="sr-only">(current)</span></a></li>
<li <?php if($currentPage == 'Excellent'){echo 'class ="active"';}?>>
<a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Post<span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<?php
if ($post){
while($result = $post->fetch_assoc())
{
?>
<li><a href="../Template/Excellent.php?id=<?php echo $result['id'];?>"><p><?php echo $result['title'];?></p></a></li>
<?php }
}else{
echo "data not Found!!";
}?>
</ul>
</li>
<?php
$aboutQuery = "select * from `tbl_page`";
$navigation = $db->select($aboutQuery);
if ($navigation)
{
while($aboutResult = $navigation->fetch_assoc())
{
?>
<li id="nav_link"
<?php if (isset($_GET['pageid'])&& $_GET['pageid']== $aboutResult['id'])
{
echo 'class ="active"';
}
?>
> <a href="../Template/page.php?pageid=<?php echo $aboutResult['id'];?>"><?php echo $aboutResult['name'];?>
</a>
</li>
<?php
}
}
?>
<li <?php if($currentPage == 'contact'){echo 'class ="active"';}?> ><a href="../Template/contact.php">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<!-- Navbar Ends -->
</header>
<!-- header ended -->
js.php
$('#nav_link li a').click(function (e) {
e.preventDefault();
var navPage=$(this).attr('href');
// alert(navPage);
$(document.body).load(navPage).fadeIn('slow');
$('.dropdown-toggle').dropdown();
if(navPage!==location.href){
window.history.pushState({path:navPage},'',navPage);
}
return false;
});
任何帮助都可以提供，或者请给我启发。感谢前进
更新 这是更新
header.php
<?php
// require_once "../vendor/autoload.php";
include "../lib/Database.php";
include "../config/config.php";
include "../helpers/Format.php";
$fm= new Format();
$db = new Database();
$query ="SELECT * FROM `tbl_post` LIMIT 5";
$post = $db->select($query);
?>
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<?php include '../scripts/meta.php';?>
<?php include '../scripts/css.php';?>
</head>
<style>
.row{
margin:0;
}
</style>
<body>
<!-- header starts -->
<header>
<section id="smedia">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 navbar-left">
<p><a href="../Template/contact.php">PHONE: 01971982959</a> </p>
</div>
<div class="col-sm-4">
<?php
$slgQuery = "SELECT * FROM `tbl_social` WHERE `id`= '1'";
$socialMedia = $db->select($slgQuery);
if($socialMedia )
{
while($socialResult = $socialMedia->fetch_assoc()) {
?>
<a href="<?php echo $socialResult['fb']; ?>" target = "_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a href="<?php echo $socialResult['tw']; ?>" target = "_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="<?php echo $socialResult['pin']; ?>" target = "_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
<a href="<?php echo $socialResult['gplus']; ?>" target = "_blank"> <i class="fa fa-google-plus" aria-hidden="true"></i></a>
<a href="<?php echo $socialResult['ln']; ?>" target = "_blank"> <i class="fa fa-linkedin" aria-hidden="true"></i></a>
<?php
}
}
?>
</div>
</div>
</div>
</section>
<!-- Navbar Starts -->
<div class="row">
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="../Template/index.php">
<?php
$slgQuery = "SELECT * FROM `title_slogan` WHERE `id`= '1'";
$getTitle = $db->select($slgQuery);
if($getTitle)
{
while($slgResult = $getTitle->fetch_assoc())
{
?>
<img src="../Dashboard/admin/<?php echo $slgResult['logo'];?>" alt="logo" class="img-responsive">
<?php
}
}
?>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right nav_link">
<?php
$path = $_SERVER['SCRIPT_FILENAME'];
$currentPage = basename($path,'.php');
?>
<li <?php if($currentPage == 'index'){echo 'class ="active"';}?>><a href="../Template/index.php">Home <span class="sr-only">(current)</span></a></li>
<li <?php if($currentPage == 'Excellent'){echo 'class ="active"';}?>>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Post<span class="caret"></span></a>
<ul class="dropdown-menu nav_link" aria-labelledby="dLabel">
<?php
if ($post){
while($result = $post->fetch_assoc())
{
?>
<li><a href="../Template/Excellent.php?id=<?php echo $result['id'];?>"><p><?php echo $result['title'];?></p></a></li>
<?php }
}else{
echo "data not Found!!";
}?>
</ul>
</li>
<?php
$aboutQuery = "select * from `tbl_page`";
$navigation = $db->select($aboutQuery);
if ($navigation)
{
while($aboutResult = $navigation->fetch_assoc())
{
?>
<li
<?php if (isset($_GET['pageid'])&& $_GET['pageid']== $aboutResult['id'])
{
echo 'class ="active"';
}
?>
> <a href="../Template/page.php?pageid=<?php echo $aboutResult['id'];?>"><?php echo $aboutResult['name'];?>
</a>
</li>
<?php
}
}
?>
<li <?php if($currentPage == 'contact'){echo 'class ="active"';}?> ><a href="../Template/contact.php">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<!-- Navbar Ends -->
</header>
<!-- header ended -->
js.php
$('.nav_link li a').click(function (e) {
e.preventDefault();
var navPage= $(this).attr('href');
//alert(navPage);
$(document.body).load(navPage).fadeIn('slow');
$(".dropdown-toggle").dropdown();
if(navPage!==location.href){
window.history.pushState({path:navPage},'',navPage);
}
return false;
});
答案 0 :(得分：0)
非常首先从id="nav_link"中删除<li>，然后在<ul>上添加类
我建议您参加一堂课，并同时在两堂课上加<ul>
发件人：<ul class="nav navbar-nav navbar-right">
收件人：<ul class="nav navbar-nav navbar-right nav_link">
也适用于<ul>
添加相同的课程
现在更改jquery
来自：$('#nav_link li a').click(function (e) {
收件人：$('.nav_link li a').click(function (e) {
＃是ID和。是针对班级的。在此处了解有关此内容的更多信息：Selector
额外更新
有很多方法可以做到这一点，但是会让您知道对当前代码有用的一种方法
如果网址中有#，并且用于发布菜单，则需要停止jquery代码
$('.nav_link li a').click(function (e) {
e.preventDefault();
var navPage= $(this).attr('href');
if(navPage != "#"){
// your code
}
return false;
}）;