gpt4 book ai didi

javascript - 子菜单不会在页面加载时自动添加类

转载 作者:太空宇宙 更新时间:2023-11-04 11:11:43 24 4
gpt4 key购买 nike

我有一个页面,我正在尝试在子菜单上自动设置事件链接。我在主导航的标题上使用了相同的代码,但子导航无法正常工作。我已经提醒 url 的值以确保它是正确的,但它甚至没有进入 .each 循环。

这是页面

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<!-- Link to CSS stylesheets -->
<link href="css/main.css" type="text/css" rel="stylesheet"/>

<!-- jQuery Hosted Library Link -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<!-- jQuery Scripts -->
<script>
$(document).ready(function(e) {
// Get url and set navigation to the corresponding active page
$(function(){
// Set active main nav tab
var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);

if(pgurl.indexOf('?') > -1){
pgurl = pgurl.substring(0, pgurl.indexOf('?'));
}

if(pgurl.indexOf('#') > -1){
pgurl = pgurl.substring(0, pgurl.indexOf('#'));
}

$("#nav-main ul li a").each(function(){
if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
$(this).addClass("a-active");
});

resizeDiv();

// Resize the sections to fit to the window height
function resizeDiv(){
vph = $(window).height();
vph = vph - 111;
$('#left-column').css({'min-height': vph});
$('#right-column').css({'min-height': vph});
}

// Import correct side nav
var side = pgurl.substring(0, pgurl.indexOf('.php'));

$.ajax({
url: "include/nav-side-"+side+".php", success: function(result){
$('#nav-side').html(result);
}, error: function (){
$('#nav-side').html("<p>An error has occurred importing the navigation.</p>");
}
});

// Set active sub nav listing
var suburl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);

if(suburl.indexOf('#') > -1){
suburl = suburl.substring(0, suburl.indexOf('#'));
}

$("#nav-side ul li a").each(function(){
if($(this).attr("href") == suburl || $(this).attr("href") == '' )
$(this).addClass("a-active");
});
});
});
</script>

<title>Senneca Portal | Adminstration Panel</title>
</head>
<body>
<?php require_once("include/header.php"); ?>
<section id="content">
<section id="left-column">
<img id="profile-img" src=""/>
<nav id="nav-side"></nav>
</section>
<section id="right-column">
<div id="content-header">
<button id="create">Add <?php echo $pageName; ?></button>
<h2><?php echo $pageName; ?></h2>
</div>
</section>
</section>
</body>
</html>

这是我为子导航导入的导航 uls。

    <ul>
<p class="p-nav-side-title">Admin Controls</p>
<li><a href="admin.php">Websites</a></li>
<li><a href="admin.php?page=products">Products</a></li>
<li><a href="admin.php?page=library">Library</a></li>
<li><a href="admin.php?page=users">Users</a></li>
</ul>

出于某种原因,这甚至没有进入导航侧元素的第二个 .each 循环。

我相信这是因为它在加载时加载到页面中。我怎样才能让它在导入时正常工作?

最佳答案

我认为“//Set active sub nav listing”部分没有等待 ajax 完成,所以它在导入的侧导航加载之前就被执行了。

试试这个:

            $.ajax({
url : "include/nav-side-" + side + ".php",
success : function(result) {
$('#nav-side').html(result);

// Set active sub nav listing
var suburl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);

if (suburl.indexOf('#') > -1) {
suburl = suburl.substring(0, suburl.indexOf('#'));
}

$("#nav-side ul li a").each(function() {
if ($(this).attr("href") == suburl || $(this).attr("href") == '')
$(this).addClass("a-active");
});

},
error : function() {
$('#nav-side').html("<p>An error has occurred importing the navigation.</p>");
}
});

});
});

关于javascript - 子菜单不会在页面加载时自动添加类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33571399/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com