For HTML+ajax development front-end, many times the page will have some fixed content, such as a switch at the bottom, which is equivalent to a tab. Many pages will use it. It is certainly not wise to write one page.

Once used ifream to implement, ha ha...

Use a js file and pull one for each page. This is also OK. Every time you modify a js file, all pages are modified.

Back to the point:

Recently, we found a JS, vue.js. Well, the basic things are very useful, but for me, a non professional front-end, in-depth study is not necessary, give everyone an address https://cn.vuejs.org/v2/guide/, master the basic, there is no problem in front-end binding and displaying data, so easy is a mobile website.

Direct code: js file code, url is the jump address, ISO is whether to select, count is the tab sometimes need to prompt a number or what, self understanding.

Vue.component('webbottom', {
    props: ['post'],
    template: " <a  v-on:click=\"$emit('goto-url',post.url,post.id)\" :class=\"[post.ison]\" >{{post.title}}<span v-if=\"post.count>0\">{{post.count}}</span></a>"
})
var Index = new Vue({
    el: '#app_bottom',
    data: {
        posts: [
      { id: 7, title: 'My home page', url: 'HtmlPage.html',ison:'' },
      { id: 8, title: 'Personal Center', url: 'vue_compnent.html', ison:'' },
      { id: 9, title: 'Message center', url: 'content', count: 1, ison:'' }
        ]
    },
    methods: {
        GotoUrl: function (argument,id) {
            alert(argument);
            //Jurisdiction
            location.href = argument;
        }
    }
});
//Initialization data
$(document).ready(function () {
    Index.posts[2].count = 5;
    Index.posts[id].ison = "on";
})

Front end page: html, fill in this code on every page you need. If you have a style sheet, you don't need to add it. My own style is used to test the selected state. It's ugly. Note that there is a variable id, which is a value, telling js that the tag is selected. It corresponds to the id in js

Remember to quote js
 <script src="jquery132min.js"></script>
 <script src="vue.js" type="text/javascript"></script>

//Write a reusable file (as template content of HTML page) and put it in the body
    <style type="text/css">
        .bottom span {
            padding: 10px;
            margin: 10px;
            background-color: red;
        }

        .bottom a {
            padding: 10px;
            margin: 10px;
            background-color: yellow;
            cursor: alias;
        }

            .bottom a:hover {
                padding: 10px;
                margin: 10px;
                background-color: blue;
            }

            .bottom a.on {
                background-color: forestgreen;
            }
    </style>
    <div id="app_bottom" class="bottom">
        <a class="on">test<span>Effect</span></a>

        <webbottom v-for="post in posts"
                   v-bind:key="post.id" v-bind:post="post" v-on:goto-url="GotoUrl"></webbottom>
    </div>
    <script> var id =0;//Get parameter < / script >
    <script src="JavaScript.js" type="text/javascript"></script>

The code is simple. Like it.