使用jquery 引用公用组件的方法

今天我在写代码的时候，想写一个导航栏，但是我用的原生，没有用Vue

所以我在找一个方法使原生的也可以引用公用组件，找到了一个方法

要引入使用jquery

这里以我要引用的导航栏组件为例子：

在需要引入导航组件的页面引入jquery

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

在根目录创建一个名字为header.html 的文件，这个文件里就可以写你的导航栏了

找到你需要引用的页面，在页面里导航栏的位置写下这个标签

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

并且写下这个代码，注意更改你的文件路径

<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>

这样就完成引用了，需要注意的是：

扫描二维码关注公众号，回复： 16847039 查看本文章

你引用后打开页面并不会生效，出现了跨域问题，提供一个解决方案，下载live server 这个插件启动网页就能解决跨域问题了

还有一个需要注意的地方，假如你用了Bootstrap 这样的框架，你想图方便，把Bootstrap 直接在你的导航组件里引用，这样可以不用在每个页面单独引用。这可行吗？答案是可行的！缺点是：

页面会先加载出来文字再加载你组件里引用的这个Bootstrap 自带的 CSS样式,会导致用户看到页面先出现文字，最后才变成你所给的样式，虽然只有不到1秒但也是一个需要注意的问题，解决方法就是每个页面单独引入这个Bootstrap

注意！！！这个使用jquery引入的页面也存在缓存问题！请移步我这个篇教程观看解决方案！

http://t.csdn.cn/XJO4D

使用jquery 引用公用组件的方法

猜你喜欢