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. java.security KeyPairGenerator

    KeyPairGenerator 类用于生成公钥和私钥对.密钥对生成器是使用 getInstance 工厂方法(返回一个给定类的实例的静态方法)构造的. 特定算法的密钥对生成器可以创建能够与此算法一起 ...

  2. C# winform Panel 添加 滚动条

    Detailed discussion here. Try this instead for 'only' scrolling vertical.(auto scroll needs to be fa ...

  3. js大文件分块上传断点续传demo

    文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...

  4. leaning java swing 为组件设置边框

    import javax.swing.*; import javax.swing.border.BevelBorder; import javax.swing.border.Border; impor ...

  5. 常见的div布局

    1.一列固定宽度且居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  6. 洛谷 P1950 长方形_NOI导刊2009提高（2） 题解

    P1950 长方形_NOI导刊2009提高(2) 题目描述 小明今天突发奇想,想从一张用过的纸中剪出一个长方形. 为了简化问题,小明做出如下规定: (1)这张纸的长宽分别为n,m.小明讲这张纸看成是由 ...

  7. 洛谷 P1190 接水问题 题解

    P1190 接水问题 题目描述 学校里有一个水房,水房里一共装有 \(m\) 个龙头可供同学们打开水,每个龙头每秒钟的供水量相等,均为1. 现在有 \(n\) 名同学准备接水,他们的初始接水顺序已经确 ...

  8. shell编程题（一）

    求2个数之和 #!/bin/bash function add { )); then echo "The arg in't correct" else +$)) echo $sum ...

  9. Codeforces 1239E. Turtle 折半

    原文链接www.cnblogs.com/zhouzhendong/p/CF1239E.html 前言 咕了这么久之后,我的博客复活了! 题解 结论1 存在一个最优解\(A\)数组,满足\(\foral ...

  10. Java SpringBoot全局错误处理类，返回标准结果

    package demo.utils; import com.alibaba.fastjson.JSON; import demo.controller.ProductController; impo ...