参考：https://bbs.csdn.net/topics/391846671
问：
比如打开starter.html，然后点击其左边栏的链接(如user.html
)的时候，怎么实现在右边的content区打开user.html的网页。看他的实现范例，好像u
ser.html也带有如starter.html完整的边栏、上面导航条的信息？
答：
首先，在主页面的<div class="content-wrapper">区的<section class="content">中，增加一个iframe，如<iframe id="menuFrame" name="menuFrame" src="main.htm" style="overflow:visible;" scrolling="yes" frameborder="no" height="100%" width="100%"></iframe>，注意：其中的main.html是默认显示的一个页面。name为menuFrame。
然后在侧边栏的链接处，设置<a>标签的target属性为menuFrame，如下所示：
<li class="active"><a href="pages/test.html" target="menuFrame" ><i class="fa fa-link"></i> <span>用户管理</span></a></li>
例子
完整代码：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <head> <title>管理后台</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Tell the browser to be responsive to screen width --> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <!-- Bootstrap 3.3.7 --> <link rel="stylesheet" th:href="@{/assets/plugins/bootstrap/css/bootstrap.min.css}"> <!--<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">--> <!-- Font Awesome --> <link rel="stylesheet" th:href="@{/assets/plugins/font-awesome/css/font-awesome.min.css}"> <!-- Ionicons --> <!-- Theme style --> <link rel="stylesheet" th:href="@{/assets/css/AdminLTE.min.css}"> <!-- AdminLTE Skins. Choose a skin from the css/skins folder instead of downloading all of them to reduce the load. --> <link rel="stylesheet" th:href="@{/assets/css/_all-skins.min.css}"> <!-- iCheck --> <link rel="stylesheet" th:href="@{/assets/plugins/iCheck/square/blue.css}"> <link rel="stylesheet" th:href="@{/assets/css/home.css}"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <link rel="icon" th:href="@{/assets/img/favicon.ico}"> </head> <body class="hold-transition skin-blue sidebar-mini"> <div class="wrapper"> <header class="main-header"> <!-- Logo --> <a href="#" class="logo"> <!-- mini logo for sidebar mini 50x50 pixels --> <span class="logo-mini"><b>A</b>LT</span> <!-- logo for regular state and mobile devices --> <span class="logo-lg"><b>WindCoder</b>.com</span> </a> <!-- Header Navbar: style can be found in header.less --> <nav class="navbar navbar-static-top"> <!-- Sidebar toggle button--> <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button"> <span class="sr-only">Toggle navigation</span> </a> <div class="navbar-custom-menu"> <ul class="nav navbar-nav"> <!-- Messages: style can be found in dropdown.less--> <li class="dropdown messages-menu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-envelope-o"></i> <span class="label label-success">4</span> </a> <ul class="dropdown-menu"> <li class="header">您有4条信息</li> <li> <!-- inner menu: contains the actual data --> <ul class="menu"> <li><!-- start message --> <a href="#"> <div class="pull-left"> <img th:src="@{/assets/img/user2-160x160.jpg}" class="img-circle" alt="User Image"> </div> <h4> 小西西 <small><i class="fa fa-clock-o"></i> 5 mins</small> </h4> <p>你是谁?</p> </a> </li> <!-- end message --> </ul> </li> <li class="footer"><a href="#">查看所有信息</a></li> </ul> </li> <!-- User Account: style can be found in dropdown.less --> <li class="dropdown user user-menu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <img th:src="@{/assets/img/user2-160x160.jpg}" class="user-image" alt="User Image"> <span class="hidden-xs">WindCoder</span> </a> <ul class="dropdown-menu"> <!-- User image --> <li class="user-header"> <img th:src="@{/assets/img/user2-160x160.jpg}" class="img-circle" alt="User Image"> <p> WindCoder - 超级管理员 <small>Member since Nov. 2012</small> </p> </li> <!-- Menu Body --> <li class="user-body"> <div class="row"> <div class="col-xs-6 text-center"> <a href="#">粉丝</a> </div> <div class="col-xs-6 text-center"> <a href="#">关注</a> </div> </div> <!-- /.row --> </li> <!-- Menu Footer--> <li class="user-footer"> <div class="pull-left"> <a href="#" class="btn btn-default btn-flat">个人信息</a> </div> <div class="pull-right"> <a href="/logout" class="btn btn-default btn-flat">退出</a> </div> </li> </ul> </li> <!-- Control Sidebar Toggle Button --> </ul> </div> </nav> </header> <!-- Left side column. contains the logo and sidebar --> <aside class="main-sidebar"> <!-- sidebar: style can be found in sidebar.less --> <section class="sidebar"> <!-- Sidebar user panel --> <!-- /.search form --> <!-- sidebar menu: : style can be found in sidebar.less --> <ul class="sidebar-menu" data-widget="tree"> <li class="treeview"> <a href="#"> <i class="fa fa-dashboard"></i> <span>任务管理</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <li data-src="task/index.shtml"><a href="#task/index.shtml"><i class="fa fa-circle-o"></i>任务列表</a></li> <li data-src="task/cron.shtml"><a href="#task/cron.shtml"><i class="fa fa-circle-o"></i>表达式生成器</a></li> <li class="active"><a href="index2.html" target="menuFrame" ><i class="fa fa-circle-o"></i> 仪表盘 v2</a></li> <li class="active"><a href="test.html" target="menuFrame" ><i class="fa fa-link"></i> <span>用户管理</span></a></li> </ul> </li> <li class="treeview"> <a href="#"> <i class="fa fa-dashboard"></i> <span>工具箱</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <li data-src="error.html"><a href="/initResponsiblity"><i class="fa fa-circle-o"></i>任务列表</a></li> <li data-src="task/cron.shtml"><a href="#task/cron.shtml"><i class="fa fa-circle-o"></i>表达式生成器</a></li> </ul> </li> </ul> </section> </aside> <!-- Content Wrapper. Contains page content --> <div class="content-wrapper"> <!-- Content Header (Page header) --> <section class="content-header"> <h1> Dashboard <small>Version 2.0.0</small> </h1> <ol class="breadcrumb"> <li><a href="#"><i class="fa fa-dashboard"></i> Home Page</a></li> <li class="active">Dashboard</li> </ol> </section> <!-- Main content --> <section class="content"> <!-- /.row --> <!--<iframe scrolling="yes" frameborder="0"--> <!--style="width: 100%; min-height: 700px; overflow: visible; background: #fff;"--> <!--src='' id="main" name="main"></iframe>--> <iframe id="menuFrame" name="menuFrame" src="index.html" style="overflow:visible;" scrolling="yes" frameborder="no" height="100%" width="100%"></iframe> </section> </div> </div> <!-- ./wrapper --> <script> var basePath = ""; </script> <!-- jQuery 3 --> <script th:src="@{/assets/js/jquery.min.js}"></script> <!-- Bootstrap 3.3.7 --> <script th:src="@{/assets/plugins/bootstrap/js/bootstrap.min.js}"></script> <!-- AdminLTE App --> <script th:src="@{/assets/js/adminlte.js}"></script> </body> </html>