bootstrap导航栏,包括顶部和左侧导航栏。点击导航菜单,实现页面跳转。
1、顶部导航栏
源码:
$(function() {
//顶部导航栏点击添加active样式
$('ul.nav > li').click(function (e) {
e.preventDefault();
$('ul.nav > li').removeClass('active');
$(this).addClass('active');
});
});
//点击顶部导航菜单跳转页面
function turn(url){
$("#mainDiv").load(url);
}
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> LOGO</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="index.jsp">首页</a></li>
<li><a href="javascript:void(0)" onclick="turn('one.jsp')">页面一</a></li>
<li><a href="javascript:void(0)" onclick="turn('two.jsp')">页面二</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
下拉菜单<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)" onclick="turn('one.jsp')">页面一</a></li>
<li><a href="javascript:void(0)" onclick="turn('two.jsp')">页面二</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入...">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
</div>
</div>
2、左侧导航栏
使用bootstrap-treeview实现左侧树形菜单
源码:
$(function() {
//左侧导航菜单
var defaultData = [
{
text: 'Parent 1',
nodes: [
{
text: 'Child 1.1',
href: 'one.jsp'
},
{
text: 'Child 1.2',
href: 'two.jsp'
}
],
state: {
expanded: false
}
},
{
text: 'Parent 2',
nodes: [
{
text: 'Child 2.1',
href: 'one.jsp'
},
{
text: 'Child 2.2',
href: 'two.jsp'
}
],
state: {
expanded: false
}
}
];
$('#tree').treeview({
backColor: "#FFFFFF",
color: "#428bca",
expanded: true,
data: defaultData,
onNodeSelected: function (event, data) {
$("#mainDiv").load(data.href);
}
});
});
<div class="container-fluid">
<div class="col-md-3">
<h2>左侧导航栏</h2>
<div id="tree" class=""></div>
</div>
<div id="mainDiv" class="col-md-9"></div>
</div>
整体页面效果
点击顶部导航栏“页面一”,右侧显示页面一
点击左侧导航栏“Child 1.2”,右侧显示页面二
完整源码:index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>index</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-treeview.min.css" />
<script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap-treeview.min.js"></script>
<script type="text/javascript">
$(function() {
//顶部导航栏点击添加active样式
$('ul.nav > li').click(function (e) {
e.preventDefault();
$('ul.nav > li').removeClass('active');
$(this).addClass('active');
});
//左侧导航菜单
var defaultData = [
{
text: 'Parent 1',
nodes: [
{
text: 'Child 1.1',
href: 'one.jsp'
},
{
text: 'Child 1.2',
href: 'two.jsp'
}
],
state: {
expanded: false
}
},
{
text: 'Parent 2',
nodes: [
{
text: 'Child 2.1',
href: 'one.jsp'
},
{
text: 'Child 2.2',
href: 'two.jsp'
}
],
state: {
expanded: false
}
}
];
$('#tree').treeview({
backColor: "#FFFFFF",
color: "#428bca",
expanded: true,
data: defaultData,
onNodeSelected: function (event, data) {
$("#mainDiv").load(data.href);
}
});
});
//点击顶部导航菜单跳转页面
function turn(url){
$("#mainDiv").load(url);
}
</script>
</head>
<body>
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> LOGO</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="index.jsp">首页</a></li>
<li><a href="javascript:void(0)" onclick="turn('one.jsp')">页面一</a></li>
<li><a href="javascript:void(0)" onclick="turn('two.jsp')">页面二</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
下拉菜单<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)" onclick="turn('one.jsp')">页面一</a></li>
<li><a href="javascript:void(0)" onclick="turn('two.jsp')">页面二</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入...">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
</div>
</div>
<div class="container-fluid">
<div class="col-md-3">
<h2>左侧导航栏</h2>
<div id="tree" class=""></div>
</div>
<div id="mainDiv" class="col-md-9"></div>
</div>
</body>
</html>