html导航栏不跳转切换页面（html页面跳转时导航栏不变）
本文目录一览：
- 1、html怎么在一张网页上出现一个列表，列表内有几项，单机切换内容，并不跳转到另一个网页。
- 2、HTML打开一个链接的时候如何不跳转新窗口直接在内嵌页面展示？
- 3、html导航栏怎么实现不跳转页面就能换内容
- 4、html5如何做到使用导航栏切换页面时不重新加载页面
html怎么在一张网页上出现一个列表，列表内有几项，单机切换内容，并不跳转到另一个网页。
!DOCTYPE html
html
head
meta charset="utf-8"
titleTEST/title
script src=""/script
style type="text/css"
*{ margin: 0; padding: 0; }
.list {
float: left;
width: 10%;
}
li { list-style: none; }
ul { display: none; }
.active { display: block; }
/style
/head
body
div class="3d80-df9c-91e3-82e1 list"
h4列表1/h4
ul class="df9c-91e3-82e1-b53c active"
li列表1的内容/li
li列表1的内容/li
li列表1的内容/li
/ul
/div
div class="91e3-82e1-b53c-a8fd list"
h4列表2/h4
ul
li列表2的内容/li
li列表2的内容/li
li列表2的内容/li
/ul
/div
script type="text/javascript"
$("h4").click(function(){
$(this).siblings("ul").addClass("active").parent().siblings().children("ul").removeClass("active");
})
/script
/body
/html
用jquery可以比较简单的表示，思路是：把全部列表隐藏掉，然后设置一个active的样式显示列表，点击哪个列表，就给这个列表加上active这个样式，这样这个列表就会显示出来了，同时， 把另外那个列表去掉active这个样式，另一个列表就隐藏掉了。你就算有N个列表，也可以正常运行
HTML打开一个链接的时候如何不跳转新窗口直接在内嵌页面展示？
这样要用锚点链接。就是要随时跟着侧边栏变化的主题内容显示区域要设置name，
比如div name="content"/div，然后链接要指向设置的那个name,写法：a href="" target=“content/a，那样就可以在点击链接的时候，设置name的区域随之改变，而且都是在同一个页面，不会跳转出去。
html导航栏怎么实现不跳转页面就能换内容
在页面的head/head中间写上 base target="_self" 即可
html5如何做到使用导航栏切换页面时不重新加载页面
我刚开始也在找这个问题的答案，现在解决了，为后面学习的人栽棵树吧。
实现这个功能有很多种方法，这里我选一种个人认为比较简单的方法：
建立三个网页，一个作为主页面，另外两个子页面作为切换页面嵌入主页面，子页面也可以用文字替代。
用jQuery方法来切换页面，语言比较简单网上搜一下看看就懂了
下面附上代码
!DOCTYPE html
html
head
meta charset="UTF-8"
title标题/title
!--jQuery 百度CDN库--
script src=""/script
script
// jQuery代码
$(document).ready(function () {
$("#b1").click(function () {
$("#tab_1").show();// 显示
$("#tab_2").hide();// 隐藏
});
$("#b2").click(function () {
$("#tab_1").hide();
$("#tab_2").show();
});
});
/script
/head
body
div
h1标题一/h1
/div
div
div
ul
libutton id="b1"菜单1/button/li
libutton id="b2"菜单2/button/li
/ul
/div
div
div id="tab_1"
子页面1
/div
div id="tab_2" style="display: none"
子页面2
/div
/div
/div
/body
/html
