javascript - 是否有 CSS 或 Javascript 解决方案来更改当前页面导航选项卡的背景图像？

Question

有没有办法使用 JavaScript 编写一段条件代码来检查您是否在某个 url 或 id 上，如果是，则为某个选项卡加载“打开”背景图像？

在不使用 JavaScript 的情况下，他们是一种更简单的方法吗？

谢谢。

Answer 1

是的，有。我将把这个答案分成两部分来尝试解决这两个(隐含的)问题；尽管我希望在解决 JavaScript 可能性之前看到一些实际的标记。

---

CSS id-based conditional background changes，我假设 id 在 body 标签上，但这个假设不是t 在代码中是显式的，所以只要它是具有相关 id 的元素的祖先，同样的方法就可以工作:

#homePageId #tabToGoToHomePage {
    background-image: url('path/to/homePageImage.png');
}

#siteMapPageId #tabToGoToSiteMapPage {
    background-image: url('path/to/siteMapPageImage.png');
}

#contactPageId #tabToGoToContactPage {
    background-image: url('path/to/contactPageImage.png');
}

/* ...and so on... */

如果有多个元素表示指向特定页面的链接，您可以(显然，我想)为这些元素和 CSS 选择器使用类名。

---

不过，基于 URL 的条件背景更改更多地取决于您的 html 结构。发布您的标记会有所帮助。

以下内容基于以下标记，没有看到您的标记，我无法提供更具体的信息。不过，它应该适合您的情况:

HTML:

<ul><!-- primary navigation -->
    <li><a href="#" class="navigation goHome" data-link="home">Home</a></li>
    <li><a href="#" class="navigation goAbout" data-link="about">About</a></li>
    <li><a href="#" class="navigation goClients" data-link="clients">Clients</a></li>
    <li><a href="#" class="navigation goContact" data-link="contact">Contact Us</a></li>
</ul>
<!-- other content -->
<ul><!-- secondary navigation -->
    <li><a href="#" class="navigation goHome" data-link="home">Home</a></li>
    <li><a href="#" class="navigation goAbout" data-link="about">About</a></li>
    <li><a href="#" class="navigation goClients" data-link="clients">Clients</a></li>
    <li><a href="#" class="navigation goContact" data-link="contact">Contact Us</a></li>
</ul>

JavaScript:

var tabs = document.getElementsByClassName('navigation');
var url = 'http://www.example.com/about/';
// in real life use something like:
// var url = document.location;

if (url.charAt(url.length-1) == '/') {
    url = url.substr(0,url.length - 1);
    // I'm assuming that the pages are all in their own directories,
    // this gets rid of any trailing '/' characters
}
var curPage = url.split('/').pop().toLowerCase();

for (i=0; i<tabs.length; i++){
    if (tabs[i].getAttribute('data-link').toLowerCase() == curPage){
        tabs[i].style.backgroundColor = 'red';
        /* or:
        tabs[i].style.backgroundImage = 'url("http://path/to/image.png")';
        */
    }
}

JS Fiddle demo .