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大文件分块上传断点续传demo

    第一点:Java代码实现文件上传 FormFile file = manform.getFile(); String newfileName = null; String newpathname =  ...

  2. 通过map文件找程序崩溃的代码行

    一,配置vs 二,程序崩溃界面 // ConsoleApplication1.cpp : 此文件包含 "main" 函数.程序执行将在此处开始并结束. // #include &l ...

  3. 洛谷 P2032 扫描 题解

    P2032 扫描 题目描述 有一个 1 ∗ n 的矩阵,有 n 个正整数. 现在给你一个可以盖住连续的 k 的数的木板. 一开始木板盖住了矩阵的第 1 ∼ k 个数,每次将木板向右移动一个单位,直到右 ...

  4. 【一起来烧脑】一步学会CSS3体系

    [外链图片转存失败(img-yfi1VPyy-1563434266398)(https://upload-images.jianshu.io/upload_images/11158618-fc8784 ...

  5. [SDOI2009][BZOJ 1226]学校食堂

    Description 小F 的学校在城市的一个偏僻角落,所有学生都只好在学校吃饭.学校有一个食堂,虽然简陋,但食堂大厨总能做出让同学们满意的菜肴.当然,不同的人口味也不一定相同,但每个人的口味都可以 ...

  6. GO语言html模板

    模板 一个模板是一个字符串或一个文件,里面包含了一个或多个由双花括号包含的{{action}}对象.大部分的字符串只是按面值打印,但是对于actions部分将触发其它的行为.每个actions都包含了 ...

  7. 大数据|linux权限chmod和chown

    一.基础概念 1)rwx含义 示例如下 r:读权限read 4 w:写权限write 2 x:操作权限execute  1 -:无权限 2)drwxr - xr -x 与 - rw - r - - r ...

  8. Ubuntu16.04忘记MySQL5.7的root用户密码之解决方案

    其实也就四步,如下: 修改配置文件 sudo vimi /etc/mysql/mysql.conf.d/mysqld.cnf 并在 在[mysqld]下方的skip-external-locking下 ...

  9. useContext 让父子组件传值更简单（五）

    有了useState和useEffect已经可以实现大部分的业务逻辑了,但是React Hooks中还是有很多好用的Hooks函数的,比如useContext和useReducer. 在用类声明组件时 ...

  10. 关于如何取消访问https时的提示：“此网站的安全证书存在问题”的解决方法

    问题描述: 症状1:采用IE浏览器通过https/http协议访问网站时,总是提示:“此网站的安全证书存在问题.” 症状2:采用搜狗浏览器打开网页总是看到网页的图片等元素显示不完整,是一个X的小图片. ...