How to reference public components using jquery

When I was writing code today, I wanted to write a navigation bar, but I used native instead of Vue.

So I was looking for a way to enable native ones to reference public components, and found a way

To introduce the use of jquery

Here is the navigation bar component I want to reference as an example:

Introduce jquery to the page where navigation components need to be introduced

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.js"></script>

Create a file named header.html in the root directory. Your navigation bar can be written in this file.

Find the page you need to reference and write this tag in the navigation bar of the page

   <div id="header"></div>

And write this code, pay attention to change your file path

<script>
    $(function () {
        $(document).ready(function () {
            //jquery load方法加载公共头部
            $("#header").load("./header.html", function () { //加载完成后设置高亮
                $("#navigation_1").children().attr("style", "color: #fff");
                $("#navigation_1").attr("class", "selected");
            });
        });
    })
</script>

This completes the reference. What needs to be noted is:

It will not take effect when you open the page after quoting it. A cross-domain problem has occurred. Here is a solution. Download the live server plug-in and start the web page to solve the cross-domain problem.

Another thing to note is that if you use a framework like Bootstrap, and you want to make it easier, reference Bootstrap directly in your navigation component, so that you don't have to reference it separately on each page. Is this possible? The answer is yes! weakness is:

The page will load the text first and then load the Bootstrap built-in CSS style referenced in your component. This will cause the user to see the text appear on the page first, and then finally change to the style you gave. Although it only takes less than 1 second, it is still a Problems that need attention, the solution is to introduce this Bootstrap separately for each page

Notice! ! ! This page introduced using jquery also has a cache problem! Please move to my tutorial to see the solution!

http://t.csdn.cn/XJO4D

How to reference public components using jquery

Guess you like