bootstrap建网站如何实现导航栏不变内容变

最新推荐文章于 2023-05-15 22:26:00 发布

immenselee

最新推荐文章于 2023-05-15 22:26:00 发布

阅读量1.1w

点赞数 3

分类专栏： html 网页设计学习 java 文章标签： html bootstrap 导航标签

本文链接：https://blog.csdn.net/immenselee/article/details/71773646

版权

网页设计学习同时被 3 个专栏收录

60 篇文章 0 订阅

订阅专栏

java

49 篇文章 0 订阅

订阅专栏

html

36 篇文章 0 订阅

订阅专栏

html如何实现点击导航，导航不变内容变如题，下载了一些bootstrap网页模板，自己写的后台，前端用html，我看模板上有有导航，但是不知道如何切换导航，导航不变，内容改变，我知道jsp
可以用include标签，但是html我却只知道iframe 标签

3种实现方式：

点击导航，页面刷新，加载完成后重新使导航内容为刷新前的内容，通过url中传参就可以达到了。
采用单页面的方式，内容都写在页面中，初始化时，仅显示当前内容，其他内容隐藏，通过点击导航条来切换需要显示的内容。
采用iframe的方式，要显示的内容在主html中，内容显示在html的iframe标签中，通过改变iframe的src来加载不同的内容。
目前很多网站都是采用第一种方式；论体验列表内容，第二种方式好；论方便，选择1,3种方式！

jsp include的用法

我们都知道在jsp中include有两种情势,分别是

<%@ include file=” ”%>
<jsp:include page=” ” flush=”true”/>

前者是指令元素、后者是行动元素。具体它们将在哪里用？怎么用及它们有什么区别？这应该是很多人看到它都会想到的题目。下面一起来看看吧。

平常当利用程序中全部的页面的某些部分（例如题目、页脚和导航栏）都雷同的时候，我们就可以考虑用include。具体在哪些时候用<%@ include file=” ”%>，哪些时候用
<jsp:include page=” ” flush=”true”/>.这种情势。首先要知道的是它们中间的区别。只有了解了它们用法的不同才懂得该在何时去用以及怎么选择。

<%@ include file=” ”%>

jsp的include指令元素读入指定页面的内容。并把这些内容和本来的页面融合到一起。（这个过程是在翻译阶段:也就是jsp被转化成servlet的阶段进行的。
这里对翻译阶段进行一下说明:我们知道，jsp页面不能原封不动地被传送给浏览器，全部的jsp元素都必须首先由服务器进行处理。这是通过将jsp页面转达化成servlet，然后执行这个servlet来结束的。服务器需要一个jsp容器来处理jsp页面。jsp容器平常以servlet的情势来实现，这个servlet经过配置，可以处理对jsp页面的全部请求。
Jsp容器重视将jsp页面转化成servlet（称为jsp页面实现类—JSP Page implementation class）,并编译这个servlet。这两步就组成了翻译阶段.
由此我们就会知道：jsp页面是把include指令元素所指定的页面的实际内容（也就是代码段）参加到引入它的jsp页面中,合成一个文档后被jsp容器将它转化成servlet。可以看到这时会产生一个临时class文档和一个Java文档。下面举个例子。
服务器用tomcat，引入页面的jsp文档叫test.jsp。被引入的页面叫date.jsp.这个jsp文档里存放的是一个有关时间的jsp代码,当前的上下文根设为test

//======date.jsp的源文档=====//
<%@ page language=”java” contentType="text/html;charset=gb2312"%>
<%
  java.util.Date date=new java.util.Date();
  String date_cn ="";
  String dateStr = "";
  switch(date.getDay())
  {
      case 0:date_cn ="日"; break;
      case 1:date_cn ="一"; break;
      case 2:date_cn ="二"; break;
      case 3:date_cn ="三"; break;
      case 4:date_cn ="四"; break;
      case 5:date_cn ="五"; break;
      case 6:date_cn ="六"; break;
  }
   dateStr = (1900+date.getYear()) + "年" + (date.getMonth()+1) + "月" + date.getDate() + "日(星期" + date_cn + ")";
%>
  document.write("<%=dateStr%>");

//======以下是test.jsp的源文档=============//
<%@ page language=”java” contentType=”text/html;charset=gb2312”%>
<html>
<head>
<title>include的两种用法</title>
<jsp:include page=”date.jsp” flush=”true”/>
<%--@ include file=”date.jsp” %-->
  //我们在这里用include的两种不怜悯势来引入date.jsp这个文档.
<head>
<body>
<table><tr><td>
有关jsp中include的两种用法.敬请关注。
</td></tr></table>
</body>
</html>

在test.jsp文档中，我们只输出了一行文本“ 有关jsp中include的两种用法.敬请关注。”,现在让我们先用<%@ include file=”date.jsp” %>这种情势引入date.jsp这个文档。你想会出现什么题目了吗？此时出现了错误提示：
HTTP Status 500 –
org.apache.jasper.JasperException: /date.jsp(0,0) Page directive: can’t have multiple occurrences of contentType

以下还有一堆错误，但我们只要看这里就知道题目标所在了。状况码为http 500服务器内部错误。再看下面的提示。在date.jsp页面中不能指定多个contentType.
原因就在这里了。是由于在翻译阶段,date.jsp文档的代码被原封不动地参加到了test.jsp页面从而合成一个文档。合成后的文档中就会雷同的：

<%@ page language=”java” contentType=”text/html;charset=gb2312”%>

这句代码。解决的办法是把date.jsp文档中的这句删掉。刷新后再请求test.jsp页面
请求test.jsp在页面显露如下

2003年12月10日 13:12:40
有关jsp中include的两种用法.敬请关注。

这时我们还不能发觉什么。还是去查看tomcat下的临时文档吧。到那里去看看date.jsp文档的内容是否已被参加到了test.jsp文档中。
<注.此处的tomcat装在E盘根目录下>

目录
E:/tomcat/work/Standalone/localhost/test.

在这个目录下会看到
test_jsp.java和test_jsp.class两个文档。

这里的java文档就是jsp容器将jsp转化成了servlet而得到的test_jsp.java这个文档。
相对应的test_jsp.class这个文档就是编译test_jsp.java这个servlet文档产生的类文档了。打开所产生的servlet文档（test_jsp.java）。此时我们会发觉，

在test.jsp文档被转化成servlet文档时，在输出的中间参加了一些不是test.jsp页面里面的代码,新参加的内容就是date.jsp里面的代码: 新参加了哪些内容或是否真的参加了新的内容请自己测试去看一下就会一目了然了.在这里不再详述.
以上就是我们用<%@ include file=”date.jsp”%>这种情势得到的成果.

下面我们换用也就是将

<%@ include file=”date.jsp”%>换成<jsp:include page=”dae.jsp” flush=”true”/>,然后请求test.jsp.

有关jsp中include的两种用法.敬请关注。

此时会在页面上看见.我们所引入date.jsp输出的日期中中文出现了乱码.什么原因?
是由于include行动元素是在请求处理阶段执行的.(此处要对请求处理阶段进行说明一下.
Jsp容器除了上面提到的重视将jsp页面转化成servlet外,还重视调用jsp页面实现类以处理每个请求并产生应答.这个阶段我们就称为请求处理阶段.请求处理阶段仅执行类文档.)
所以在我们作include行动元素引入页面时,实际只是引用了date.jsp这个文档被转化并被编译后产生的servlet类文档.既如此,date.jsp就是作为一个单独的文档在执行后才被test.jsp文档运行时调用.由于date.jsp文档中无指定字符编码.所以出现了乱码.解决办法是在date.jsp文档中重新把刚才去掉的

<jsp:include page=”<%=pageSelectedAtRuntime%>” flush=”true” >
<jsp:param name=”fitstParamer” value=”firstValue”>
<jsp:param name=”lastParamer” value=”lastValue”>
</jsp:include>

如果修改了被引入的jsp页面,那么可以连忙使用该页面的最新版本,这是由于看待被引入的页面的方法与看待由浏览器直接调用的jsp页面的方法完整雷同.即容器检测页面的变化,并主动进入翻译阶段,以得到页面的最新版本.

(留意,include行动元素同jsp其它元素一样,无行动体时要以”/”结束.就像下面这样.

<jsp:include page=”<%=pageSelectedAtRuntime%>” flush=”true” />

以下是对include 两种用法的区别

重要有两个方面的不同;

一:执行时间上:

<%@ include file=”relativeURI”%>                   是在翻译阶段执行
<jsp:include page=”relativeURI” flush=”true” />  在请求处理阶段执行.

二:引入内容的不同:

<%@ include file=”relativeURI”%>

引入静态文本(html,jsp),在JSP页面被转化成servlet之前和它融和到一起.

<jsp:include page=”relativeURI” flush=”true” />引入执行页面或servlet所天生的应答文本.

另外在两种用法中file和page属性都被说明为一个相对的URI.如果它以斜杠开头,那么它就

是一个环境相干的路径.将根据赋给利用程序的URI的前缀进行说明,如果它不是以斜杠开头,那么就是页面相干的路径就根据引入这个文档的页面所在的路径进行说明.更多有关URL是怎么说明的请参考相干材料或书籍.

immenselee

关注

3
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
bootstrap建网站如何实现导航栏不变内容变

html如何实现点击导航，导航不变内容变如题，下载了一些bootstrap网页模板，自己写的后台，前端用html，我看模板上有有导航，但是不知道如何切换导航，导航不变，内容改变，我知道jsp 可以用include标签，但是html我却只知道iframe 标签3种实现方式：点击导航，页面刷新，加载完成后重新使导航内容为刷新前的内容，通过url中传参就可以达到了。采用单页面的方式，内容都写在
复制链接

扫一扫