个人中心
gpt4 book ai didi

javascript - 从外部 HTML 加载导航栏并将当前 anchor 类设置为事件

转载 作者：行者123 更新时间：2023-11-30 09:51:15 25 4
gpt4 key购买 nike

我正在尝试从外部 HTML 文件加载导航栏，并根据当前页面自动将 anchor 的标签类设置为“事件”。

代码如下:

<html>
<head>
    <title>Main</title>

    <style>
        .active {
            background-color: green;
        }
    </style>

    <script>
        $(document).ready(loadAndSet());

        function loadAndSet() {
            loadBar();
            setActive();
        }

        function loadBar() {
            $('#bar').load('navigation.html');
        }

        function setActive() {
            var aObjects = document.getElementById("bar").getElementsByTagName("a");

            for (var i = 0; i < aObjects.length; i++) {
                if (document.location.href.indexOf(aObjects[i].href) >= 0) {
                    aObjects[i].className = "active";
                }
            }
        }
    </script>
</head>

<body>
    <div id="bar"></div>
    <h1>Content Title</h1>
    <p>Some content</p>
</body>
</html>

这是 navigation.html:

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="page2.html">Page 2</a></li>
</ul>

我做错了什么？

编辑:

新代码:

<html>
<head>
    <title>Main</title>

    <style>
        .active {
            background-color: green;
        }
    </style>

    <script>
        $(document).ready(loadBar());

        function loadBar() {
            $('#bar').load('navigation.html', setActive);
        }

        function setActive() {
            $("#home").addClass("active");
        }
    </script>
</head>

<body>
    <div id="bar"></div>
    <h1>Content Title</h1>
    <p>Some content</p>
</body>
</html>

和navigation.html:

<ul>
<li><a id="home" href="index.html">Home</a></li>
<li><a id="page2" href="page2.html">Page 2</a></li>
</ul>

导航栏甚至没有加载...

最佳答案

您的 navigation.html 代码缺少结束 ul-Tag:更改最后一个 <ul>至 </ul> .

第二题有点难度。页面 index.html 在 document.location.href 中可以有多个不同的值!

可以是:

http://www.stackoverflow.com/index.html

或

http://www.stackoverflow.com/

甚至

http://www.stackoverflow.com

您的代码不适用于最后两个版本的 url。

第三个问题是，load() 函数可能需要几秒钟，因此在执行 setActive() 时不会加载代码。您必须等到加载完成。您可以使用回调函数实现此目的:

$(document).ready(loadBar());

function loadBar() {
    $('#bar').load('navigation.html', setActive);
}

function setActive() {
    var aObjects = document.getElementById("bar").getElementsByTagName("a");

    for (var i = 0; i < aObjects.length; i++) {
        if (document.location.href.indexOf(aObjects[i].href) >= 0) {
            aObjects[i].className = "active";
        }
    }
}

关于javascript - 从外部 HTML 加载导航栏并将当前 anchor 类设置为事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36388281/

25 4 0
文章推荐： javascript - 尝试在组件之间传递数据时变得不确定
文章推荐： javascript - 限制对私有(private)图像的访问
文章推荐： javascript - 将鼠标悬停在切片上时更改 d3.js 饼图标签的颜色？
文章推荐： javascript - 基于 ng-click 切换 CSS 样式
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com