bootstrap导航栏

来源：互联网发布：上海东方网络金融编辑：程序博客网时间：2024/06/17 22:05

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>

阅读全文

0 0