myeclipse上实现jsp页面左边是链接右边是内容,点击链接内容改变的效果实现,jquery+bootstrap实现详细代码和解释过程
时间: 2024-02-12 14:08:04 浏览: 137
myeclipse(设置JSP页面编码格式)【图解很详细的】
首先,我们需要在jsp页面中引入jQuery和Bootstrap的相关文件。可以在head标签中加入以下代码:
```html
<!-- 引入jQuery文件 -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<!-- 引入Bootstrap文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
```
接着,在body标签中,我们可以使用Bootstrap的Grid System实现左右两栏布局,代码如下:
```html
<div class="container">
<div class="row">
<div class="col-md-3">
<!-- 左边链接列表 -->
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#content1" data-toggle="tab">链接1</a></li>
<li><a href="#content2" data-toggle="tab">链接2</a></li>
<li><a href="#content3" data-toggle="tab">链接3</a></li>
</ul>
</div>
<div class="col-md-9">
<!-- 右边内容区域 -->
<div class="tab-content">
<div class="tab-pane fade in active" id="content1">
<h3>内容1</h3>
<p>这里是内容1的具体信息。</p>
</div>
<div class="tab-pane fade" id="content2">
<h3>内容2</h3>
<p>这里是内容2的具体信息。</p>
</div>
<div class="tab-pane fade" id="content3">
<h3>内容3</h3>
<<p>这里是内容3的具体信息。</p>
</div>
</div>
</div>
</div>
</div>
```
在左侧链接列表中,我们使用了Bootstrap的导航标签`<ul class="nav nav-pills nav-stacked">`,并添加了三个链接`<li>`,分别对应三个内容区域。在右侧内容区域中,我们使用了Bootstrap的Tab标签`<div class="tab-content">`,并添加了三个内容区域`<div class="tab-pane">`,分别对应三个链接。其中,每个内容区域都用一个唯一的`id`属性标识。
最后,我们使用jQuery来实现点击链接切换内容的效果。代码如下:
```javascript
$(function(){
// 监听导航链接的点击事件
$('.nav-pills li a').click(function(){
// 获取点击的链接的href属性值,即对应的内容区域的id属性值
var contentId = $(this).attr('href');
// 切换到对应的内容区域
$('.tab-content ' + contentId).addClass('in active').siblings().removeClass('in active');
// 阻止默认链接跳转行为
return false;
});
});
```
在以上代码中,我们使用了jQuery的`click()`方法监听导航链接的点击事件,获取点击链接的`href`属性值,即对应的内容区域的`id`属性值,并使用Bootstrap的Tab标签的`addClass()`方法切换到对应的内容区域。最后,使用`return false`阻止默认链接跳转行为。
通过以上代码,我们就可以实现jsp页面左边是链接右边是内容,点击链接内容改变的效果。
阅读全文