Question

我已经在这里做了很多准备，但对他人有用的东西对我不起作用。

我尝试使用bootstrap和jQuery来使用活动类。

<div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav" id="navbar">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="t#">Services</a></li>
        <li><a href="#">Course</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-lon-in"></span>Logg inn</a></li>
    </ul>
</div>

jQuery代码：

$(document).ready(function() {
    $(".nav a").find(".active").removeClass("active");
    $(this).parent().addClass("active");
});

第一个LI处于活动状态，因为它位于html代码中。当我运行它时，效果很好。但后来我在LI上的href中添加了f.eks home.php，about.php，services.php它不起作用。

当我添加某些内容时，我只需在第一个LI上切换回活动状态。

任何人都有解决方案吗？

我在jQuery中尝试了很多解决方案。 F.eks：

$(".nav a").on("click", function() {
    $(".nav").find(".active").removeClass("active");
    $(this).parent().addClass("active");
});

这个：

$(document).ready(function() {
    $.each($('#navbar').find('li'), function() {
        $(this).toggleClass('active', '/' + $(this).find('a').attr('href') == window.location.pathname);
    });
});

这个：

$(document).ready(function() {
    $('li.active').removeClass('active');
    $('a[href="' + location.pathname + '"]').closest('li').addClass('active');
});

等等。当我添加href链接时，我不知道为什么它不会工作。

Answer 1

单击链接时由于页面刷新而导致的问题。所以我建议你点击链接找到li标签的索引，然后将其存储到本地存储或在URL中添加索引值，这将是在li标签中添加活动类的参考。

Answer 2

我问自己你是如何建立自己的网站的。我们知道你有多个网站，如home.php，about.php等，但这些网站是静态的还是动态的？

如果您使用静态网站

如果你有静态网站，意味着导航在每个单独的.php文件中编码，你可以将类“active”移动到相应文件中的正确LI。

<强> home.php

<div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav" id="navbar">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="services.php">Services</a></li>
        <li><a href="courses.php">Course</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="contact.php">Contact</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-lon-in"></span>Logg inn</a></li>
    </ul>
</div>

<强> services.php

<div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav" id="navbar">
        <li><a href="home.php">Home</a></li>
        <li class="active"><a href="#">Services</a></li>
        <li><a href="courses.php">Course</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="contact.php">Contact</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-lon-in"></span>Logg inn</a></li>
    </ul>
</div>

等

如果您使用动态网站

但是如果你正在使用动态网站，我猜你这样做，意味着有一个文件（index.php），你加载当前所选网站的数据，你也需要导航在一个单独的文件中，如navigation.php

您需要知道的最后一件事是include_once

使用此功能，您只需输入一次导航即可。如果你单击链接导航，在我的例子中，页脚也是网站中唯一不会重置为默认统计数据的部分。通过这种方式，您发布的js代码将起作用。

<强>的index.php

<body>
<?php
	include_once 'navigation.php';
	switch (key($_GET)) {
		case 'home':
			include 'home.php';
			break;
		case 'services':
			include 'services.php';
			break;
		default:
			include '404.php'
			break;
	}
	include_once 'footer.php';
?>
</body>

<强> navigation.php

<div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav" id="navbar">
        <li class="active"><a href="?home">Home</a></li>
        <li><a href="?services">Services</a></li>
        <li><a href="?courses">Course</a></li>
        <li><a href="?about">About</a></li>
        <li><a href="?contact">Contact</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
        <li><a href="?login"><span class="glyphicon glyphicon-lon-in"></span>Log in</a></li>
    </ul>
</div>

希望我能帮忙

问候hyop

jQuery活动类

2 个答案: