原生JavaScript实现内部链接

最新推荐文章于 2024-03-01 10:30:00 发布

原创最新推荐文章于 2024-03-01 10:30:00 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何通过原生JavaScript实现内部链接功能，提升长页面用户体验。通过隐藏section块，为a标签添加点击事件监听，获取并根据href属性值显示相应内容。

当我们制作一个如下的页面时：

<body>
<!--header-->
<header>
    <!--logo-->
    <img src="image/logo.jpg" alt="The logo">
    <!--nav-->
    <nav>
        <ul>
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a href="About.html">About</a>
            </li>
            <li>
                <a href="Photos.html">Photos</a>
            </li>
            <li>
                <a href="Live.html">Live</a>
            </li>
            <li>
                <a href="Contact.html">Contact</a>
            </li>
        </ul>
    </nav>
</header>

<!--content-->
<article>
    <h1>About</h1>
    <nav>
        <li>
            <a href="#jay">JAY</a>
        </li>
        <li>
            <a href="#Domsters">Domsters</a>
        </li>
        <li>
            <a href="#What">What</a>
        </li>
    </nav>

    <section id="jay">
        <h2>JAY</h2>
        <p>Here are some introductions</p>
        <p>
            Here are some introductionsHere are some introductionsHere are some introductions
            Here are some introductionsHere are some introductionsHere are some introductions
            Here are some introductionsHere are some introductionsHere are some introductions
        </p>
        <p>
            Here are some introductionsHere are some introductionsHere are some introductions
        </p>
    </section>

    <section id="Domsters">
        <h2>Domsters</h2>
        <p>Some of the things</p>
        <p>
            Some of the thingsSome of the thingsSome of the thingsSome of the thingsSome of the things
            Some of the thingsSome of the thingsSome of the thingsSome of the thingsSome of the things
            Some of the thingsSome of the thingsSome of the thingsSome of the thingsSome of the things
        </p>
        <p>
            Some of the thingsSome of the thingsSome of the thingsSome of the thingsSome of the things
        </p>
    </section>

    <section id="What">
        <h2>What</h2>
        <p>It's crazy crazy</p>
        <p>
            It's crazy crazyIt's crazy crazyIt's crazy crazyIt's crazy crazyIt's crazy crazyIt's crazy
            It's crazy crazyIt's crazy crazyIt's crazy crazyIt's crazy crazyIt's crazy crazyIt's crazy
            It's crazy crazyIt's crazy crazyIt's crazy crazyIt's crazy crazyIt's crazy crazyIt's crazy
        </p>
        <p>
            It's crazy crazyIt's crazy crazyIt's crazy crazyIt's crazy crazyIt's crazy crazyIt's crazy
        </p>
    </section>

</article>

此时的页面就会变得很长，这会严重影响到用户的体验性，此时我们可以通过一个内部链接的小脚本，就可以轻松的解决这一问题。

实现的基本思路：
1. 将section快默认不显示
2. 为a标签添加点击事件，并获取当前点击元素的href属性值
3. 寻找id为href值的元素，将这个元素设置成显示状态

脚本代码如下：

function clickSection(){
    /*向后兼容*/
    if(!document.getElementsByTagName) return false;
    if(!document.getElementById) return false;

    /*获取article*/
    var article = document.getElementsByTagName("article");
    if(article.length == 0) return false;

    /*获取article中的nav*/
    var nav = article[0].getElementsByTagName("nav");
    if(nav.length == 0) return false;

    /*遍历nav中的a*/
    var link = nav[0].getElementsByTagName("a");

    for(var i=0;i< link.length;i++){
        /*获取a标签的href值*/
        /*此时的sectionId中包括了一个#  现在不需要这个#
         * 将sectionId以#分成两个字符串
         * 获取第二段内容
         * */
        var sectionId = link[i].getAttribute("href").split("#")[1];

        /*判断真的有对应的section*/
        /*如果不存在这个id的section  则执行下一次循环*/
        if(!document.getElementById(sectionId)) continue;
        /*页面加载是默认隐藏所有*/
        document.getElementById(sectionId).style.display = "none";
        /*为link[i]添加属性  用来传递sectionId 这个属性的作用域是永久存在的*/
        link[i].destination = sectionId;
        /*添加点击事件*/
        link[i].onclick = function() {
            showSection(this.destination);
            /*阻止默认事件*/
            return false;
        };
     }
}

function showSection(id){
    var section = document.getElementsByTagName("section");
    /*遍历  作比较*/
    for(var i=0;i<section.length;i++){
        if(section[i].getAttribute("id") != id){
            section[i].style.display = "none";
        }else{
            section[i].style.display = "block";
        }
    }
}