类似tab选项卡切换页面显示数据 [ 2.0 版本 ]

2017-05-22 23:11:31 4514次浏览 6条回答 0 悬赏 30 金钱

现在做一个页面，页面有一排书的章的按钮，点击就在页面下面显示相对应章的节的内容，请问如何实现呢，获取章的ID然后接口怎么写呢，才能更新页面的显示内容，本人小白，希望解释清楚一点，没做过Tab切换动态获取数据的

最佳答案

  • 刘先生 发布于 2017-05-23 08:46 举报

    写个方法、只要选择章节、到方法、这时候获取id。然后在查询id数据给一个页面！并且跳转！

    觉得很赞
    回复 1 0

其他 5 个回答

默认排序
  • 回答于 2017-05-22 23:45 举报

    找个现成的网站，看源码，学着造轮子。

    回复 0 0
  • 回答于 2017-05-23 09:20 举报

    用Bootstrap的nav-tabs，做成左侧竖排的就可以了，这里是横排选项卡的例子：

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,maxium-scale=1,user-scalable=no">
	<link rel="stylesheet" href="./css/bootstrap.css">
	<script src="./js/jquery-1.10.2.js"></script>
	<script src="./js/bootstrap.js"></script>
</head>
<body>
	<div class="container">
		<div style="width:500px;">
		  <!-- Nav tabs -->
		  <ul class="nav nav-tabs" role="tablist">
			<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">首页</a></li>
			<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">简介</a></li>
			<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">联系方式</a></li>
			<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">系统设置</a></li>
		  </ul>

		  <!-- Tab panes -->
		  <div class="tab-content">
			<div role="tabpanel" class="tab-pane active fade" id="home">Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。</div>
			<div role="tabpanel" class="tab-pane fade" id="profile">Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。  国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。</div>
			<div role="tabpanel" class="tab-pane fade" id="messages">Bootstrap由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。  国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。</div>
			<div role="tabpanel" class="tab-pane" id="settings">Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。  国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。</div>
		  </div>

		</div>		
	</div>
</body>
</html>
    共 1 条回复
    回复于 2017-05-23 09:30 回复

    这个我也了解了，主要是，怎么切换数据呢，数据不是静态的

    回复 0 0
  • 回答于 2017-05-23 09:37 举报

    前端触发请求，使用Ajax从服务器获取数据，然后再局部更新即可，你可以先了解一下Ajax更新！

    共 1 条回复
    回复于 2017-05-23 11:42 回复

    方便加QQ交流下？

    回复 0 0
  • 回答于 2017-05-23 09:37 举报

    tab上加切换数据需要的参数

    回复 0 0
  • 回答于 2017-05-23 12:37 举报

    直接在请求链接的后面加个类似章节ID的参数，跳转到后台，后台获取这个参数，查询对应的章节内容，返回前端重新加载页面，按钮可以通过返回来的值切换‘当前章节’的样式，如果你只想更新当前页面一小部分的内容，不刷新整个页面，就用ajax吧，返回时候局部更新就好。

    回复 0 0

回答问题

您需要登录后才可以回答。登录 | 立即注册
zcx147716565
CEO

zcx147716565 广州

注册时间：2017-03-10
最后登录：2021-01-12
在线时长：69小时38分
  • 粉丝9
  • 金钱12500
  • 威望20
  • 积分13390
私信

热门问题