Question

<div class="collapse navbar-collapse navbar-right">
    <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="about-us.html">About Us</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="blog.html">Blog</a></li> 
        <li><a href="contact-us.html">Contact</a></li>                        
    </ul>
</div>

我有上面的代码，它突出显示Home按钮，因为class被设置为活动状态。

我想要做的是，我想提出某种if条件，它会检测加载了哪些html文件，并将class设置为active。

可能类似于<li (if loaded.(about-us.html):class="active"><a href="about-us.html">About Us</a></li>但这不起作用。

Answer 1

我认为您正在寻找的是jQuery .load事件处理程序。为了提高效率，最好也给li一个id：

<li id="home"><a href="index.html">Home</a></li>

<强>使用Javascript：

$( "#partBeingLoaded" ).load(function() {
   $("#home").addClass("active");
});

Answer 2

只需将其保存在您通常为所有网页加载的var client = new RestClient("http://server/"); client.CookieContainer = new System.Net.CookieContainer();文件中，并在js添加id，在此处ul。假设您的nav格式为 - url

<强> HTML

www.somedomain.com/filename.html

<强> JS

<ul class="nav navbar-nav" id="nav">

同样使用以下(function() { var nav = document.getElementById('nav'), anchor = nav.getElementsByTagName('a'), current = window.location.pathname.split('/')[1]; for (var i = 0; i < anchor.length; i++) { if(anchor[i].href == current) { anchor[i].parentNode.className = "active"; } } })();：

jquery

Answer 3

<div class="collapse navbar-collapse navbar-right">
    <ul class="nav navbar-nav">
        <li class="active" id="index"><a href="index.html">Home</a></li>
        <li id="about-us"><a href="about-us.html">About Us</a></li>
        <li id="portfolio"><a href="portfolio.html">Portfolio</a></li>
        <li id="blog"><a href="blog.html">Blog</a></li> 
        <li id="contact-us"><a href="contact-us.html">Contact</a></li>                        
    </ul>
</div>

为每个li标签设置ID

var href = document.location.href;
var filename = href.substr(href.lastIndexOf('/') + 1);
var temp = filename.split(".");
$("#"+temp[0]).addClass("active");

并且在加载页面时，您可以将该页面名称用作id以使其处于活动状态

if语句为html / jquery

3 个答案: