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. terminal mvn 打包

    命令: mvn clean install -Dmaven.test.skip=true

  2. 洛谷 P2401 不等数列 题解

    每日一题 day25 打卡 Analysis dp[i][j]=dp[i-1][j-1]*(i-j)+dp[i-1][j]*(j+1); 其中i和j是表示前i个数中有j个小于号,j<=i-1 要 ...

  3. 06.volatile关键字

    volatile volatile关键字的主要作用是使变量在多个线程间可见 使用方法: private volatile int number=0; 图示: 两个线程t1和t2共享一份数据,int a ...

  4. 11、spark内核架构剖析与宽窄依赖

    一.内核剖析 1.内核模块 1.Application 2.spark-submit 3.Driver 4.SparkContext 5.Master 6.Worker 7.Executor 8.Jo ...

  5. 说明os,sys模块有什么不同

    官方解释: os: This module provides a portable way of usingoperating system dependent functionality. 翻译:提 ...

  6. ZR#989

    ZR#989 先吐槽一下这个ZZ出题人,卡哈希表. 我就不写那个能过的类高精了,直接写哈希的题解 解法: 判断两个数相加结果是否等于第三个数, 可以直接用 hash判断． #include<io ...

  7. 中山纪中集训Day5叒是测试（划淼）

    A组T1 矩阵游戏(game) 九校联考24OI__D1T1 问题描述 LZK发明一个矩阵游戏,大家一起来玩玩吧,有一个N行M列的矩阵.第一行的数字是1,2,…M,第二行的数字是M+1,M+2…2*M ...

  8. git 的使用方法以及要注意的地方~

    1.假如你在一个分支,非master分支,例如avatar,在你修改之前一定要 get merge master,git pull,再开始写代码.如果改好了,也要先git merge master,g ...

  9. spark-shell启动错误

    18/06/24 16:41:40 ERROR spark.SparkContext: Error initializing SparkContext.java.net.BindException: ...

  10. 根据字符串从资源中取出对应的资源ResourceManager.GetObject

    ResourceManager.GetObject 根据名称从资源中取出资源 需要:我有25张 五笔图片名称是a b c d ...y 这样组成的 每张图片名字只有一个名字 我想通过字符串a取出a这张 ...