There is a navigation bar list and the corresponding content section. In addition to being able to locate the specified part, you also need to highlight the clicked navigation entries.
One switchable TAB/switchable tab list
This method is based on the switchable tab without writing any JavaScript code, simply specify the data-toggle = "tab" or data-toggle = "pill" attribute for the page element to activate the tab or capsule tab. Add the nav and nav-tabs classe for ul to add the Bootstrap tab style for it.
- <Ul class = "nav-tabs">
- <Li> <a href = "# home" data-toggle = "tab"> homepage </a> </li>
- <Li> <a href = "# profile" data-toggle = "tab"> Profile </a> </li>
- <Li> <a href = "# messages" data-toggle = "tab"> Messages </a> </li>
- <Li> <a href = "# settings" data-toggle = "tab"> Settings </a> </li>
- </Ul>
You can also use js Code to control:
- <Ul class = "nav-tabs" id = "myTab">
- <Li class = "active"> <a href = "# home">... </a> </li>
- <Li> <a href = "# profile"> Profile </a> </li>
- <Li> <a href = "# messages"> Messages </a> </li>
- <Li> <a href = "# settings"> Settings </a> </li>
- </Ul>
- <Div>
- <Div id = "home">... </div>
- <Div id = "profile">... </div>
- <Div id = "messages">... </div>
- <Div id = "settings">... </div>
- </Div>
- <Script>
- $ (Function (){
- $ ('# MyTab A'). click (function (e ){
- E. preventDefault ();
- $ (This). tab ('show ');
- })
- })
- </Script>
However, the same effect cannot be applied to the label list, because the corresponding parts of the list are displayed, but the positions of the scroll bars are different. So I made some modifications and added the code for locating the corresponding section.
- $ ('# Navi_tabs A'). click (function (e ){
- E. preventDefault ();
- $ (This). tab ('show ');
- Var id = $ (this). attr ("href ");
- $. ScrollTo (id, 100, {offset:-50 });
- })
Secondary rolling listener
Compared with the first method, rolling listening is much easier to implement. JS implementation is as follows:
- $ ('# Nav_tabs'). scrollspy ()
However, the implementation may be because the content is within the entire page range. The above method is invalid. You can only change the attributes of the body Tag:
- <Body data-spy = "scroll" data-target = ". navbar">... </body>
- Or
- $ ('Body'). attr ('data-spy', 'scroll ');
- $ ('Body'). attr ('data-target', "# navi_div ");
