Bootstrap的标签页

下面是Bootstrap的标签页,挺好的,但是用的id,内容是固定的?我不知道怎么变成不同的视图来

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<title>Bootstrap 实例 - 标签页（Tab）插件</title>

	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<ul id="myTab" class="nav nav-tabs">

	<li class="active">

		<a href="#home" data-toggle="tab">

			 菜鸟教程

		</a>

	</li>

	<li><a href="#ios" data-toggle="tab">iOS</a></li>

	<li class="dropdown">

		<a href="#" id="myTabDrop1" class="dropdown-toggle"

		   data-toggle="dropdown">Java

			<b class="caret"></b>

		</a>

		<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">

			<li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>

			<li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>

		</ul>

	</li>

</ul>

<div id="myTabContent" class="tab-content">

	<div class="tab-pane fade in active" id="home">

		<p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p>

	</div>

	<div class="tab-pane fade" id="ios">

		<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple

			TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>

	</div>

	<div class="tab-pane fade" id="jmeter">

		<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>

	</div>

	<div class="tab-pane fade" id="ejb">

		<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。

		</p>

	</div>

</div>

</body>

</html>

适合.Net MVC的标签页

这个是我发现,MVC的官方例子就是写的这个,我直接拿来用了.样式可能有点丑,我没调.

下面我写了三个标签页,你在三个视图上面都加上就可以了

<div class="navbar-collapse collapse">

    <ul class="nav  nav-tabs">

        <li>@Html.ActionLink("仓库库存列表", "Index", "ProductStock")</li>

        <li>@Html.ActionLink("仓库列表", "Index", "ProductWarehouse")</li>

        <li>@Html.ActionLink("转仓记录", "Index", "ProductStockTransfer")</li>

    </ul>

</div>

.Net MVC 标签页的更多相关文章

  1. Bootstrap -- 插件: 模态框、滚动监听、标签页

    Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...

  2. Angular实现多标签页效果(路由重用)

    1.需求 做了几年的MES系统,从ASP.NET WebForm至MVC,系统决定了用户界面必须为标签页方式实现,因为用户在进行一项操作的时候很有可能会进行其它的操作,比如查询之类的.如果按MVC的方 ...

  3. 最新 去掉 Chrome 新标签页的8个缩略图

    chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...

  4. 在QMainWindow中利用多个QDockWidget构成标签页tab（原创）

    功能描述: 在QMainWindow下,使用多个QDockWidget构成可切换,可拖动,可关闭的标签页:标签页的切换由相关联的QAction触发. 实现效果: 代码如下: QDockWidget * ...

  5. vim 标签页 tabnew 等的操作命令

    对于vim这个 ide来说, 单纯的用 多子窗口 来操作, 感觉还是不够的, 还要结合标签页tab pages来,才能更好的操作. 所有关于标签 的 命令行 命令都是 以 :tab开始的, 可以用ta ...

  6. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  7. EasyUI创建异步树形菜单和动态添加标签页tab

    创建异步树形菜单 创建树形菜单的ul标签 <ul class="easyui-tree" id="treeMenu"> </ul> 写j ...

  8. asp.net错误页和asp.net mvc错误页设置

    asp.net错误页 在日常项目开发过程中,我们需要给网站设置错误页和记录错误日志. 首先,在项目中添加全局应用程序类 在Global.asax中 protected void Application ...

  9. Tabio – 轻松，高效的管理 Chrome 标签页

    Tabio 是一个 Chrome 扩展,旨在简化大量浏览器标签页的管理.它提供的搜索功能允许您快速.轻松地找到您需要的选项卡.Tabio 便于组织你的标签,简单的拖拽排序.您也可以使用输入.删除和箭头 ...

随机推荐

  1. __try __except与__try __finally的嵌套使用以及__finally的调用时机

    原文:https://blog.csdn.net/SwordArcher/article/details/82465522 try-finally语句的语法与try-except很类似,稍有不同的是, ...

  2. LibreOJ #6191. 「美团 CodeM 复赛」配对游戏

    二次联通门 : LibreOJ #6191. 「美团 CodeM 复赛」配对游戏 /* LibreOJ #6191. 「美团 CodeM 复赛」配对游戏 概率dp */ #include <cs ...

  3. Magma中ECC的点乘实例

    a:=-3;b:= 41058363725152142129326129780047268409114441015993725554835256314039467401291;E:= Elliptic ...

  4. setitimer()函数

    定时器时间函数 struct itimerval: struct itimerval *new_value,其定义如下: struct itimerval { struct timeval it_in ...

  5. jmeter五种提取器 之 正则表达式

    提取器的作用是把响应结果值获取到,用于后续的请求参数中 () :封装了待返回的匹配字符串. .  :匹配任何单个字符串. + :一次或多次. ? :不要太贪婪,在找到第一个匹配项后停止. *  :匹配 ...

  6. Java 死锁以及死锁的产生

    public class DeadLockSample { public static void main(String[] args) { DeadLock d1 = new DeadLock(tr ...

  7. [代码审计]PHP_Bugs题目总结(1)

    0x00 简介 最近这几天看到了许多关于代码审计的ctf题,在电脑里也翻出来好长时间没看过的php_bugs,干脆最近把这个好好看看! 下载地址:https://github.com/bowu678/ ...

  8. 深入理解JVM虚拟机13：再谈四种引用及GC实践

    Java中的四种引用类型 一.背景 Java的内存回收不需要程序员负责,JVM会在必要时启动Java GC完成垃圾回收.Java以便我们控制对象的生存周期,提供给了我们四种引用方式,引用强度从强到弱分 ...

  9. 深度学习面试题25：分离卷积(separable卷积)

    目录 举例 单个张量与多个卷积核的分离卷积 参考资料 举例 分离卷积就是先在深度上分别卷积,然后再进行卷积,对应代码为: import tensorflow as tf # [batch, in_he ...

  10. 【转】python requests库添加自定义cookie的方法

    requests库是个很方便的爬虫,相关文档已经很详细了.不过我今天在爬网页时,有一个网站是在脚本中添加cookie的,但我向requests.cookies里添加cookie费了不少周折.尝试了多个 ...