Bootstrap导航栏示例-优快云博客

本文链接：https://blog.youkuaiyun.com/sunyanchun/article/details/77885690

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>