大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
我刚开始也在找这个问题的答案,现在解决了,为后面学习的人栽棵树吧。
创新互联公司自2013年创立以来,先为涪城等服务建站,涪城等地企业,进行企业商务咨询服务。为涪城企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
实现这个功能有很多种方法,这里我选一种个人认为比较简单的方法:
建立三个网页,一个作为主页面,另外两个子页面作为切换页面嵌入主页面,子页面也可以用文字替代。
用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
a href="index1.html"点击/a
点击后跳转到index1.html页面。
导航栏下面放一个Div,专门用来显示对应导航栏目的内容。点击导航栏触发点击事件,在事件函数中获取点击的栏目id,通过此id确定往div中添加那个内容。可以用div.innerHTML来更新div显示的内容。
或者,导航栏下面放置多个Div,数量等于导航栏目的个数,所有div要都重叠在一起。在点击事件函数中控制div的显示和隐藏。