是否有在VS2012，VS2013或VS2015中使用带有MVC 4视图的jquery选项卡的“工作”示例
[英]Is there a “working” example of using jquery tabs with MVC 4 views in VS2012, VS2013 or VS2015
问题描述
I've seen lots of examples (mostly VS2010) of using Tabs in MVC but I can't get any of them to actually work in a view with newer version of the VS IDE. 
我已经看到了许多在MVC中使用Tabs的示例（主要是VS2010），但是我无法让其中的任何一个在更新版本的VS IDE的视图中实际工作。 So is there an example including references which works in VS2013? 那么，有没有包含在VS2013中可用的引用的示例？
My code which works in HTML but doesn't work in MVC is: 我的代码可以在HTML中使用，但不能在MVC中使用：
@{
ViewBag.Title = "Edit1";
}
<h2>Edit1</h2>
<link type="text/css" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="Stylesheet" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.min.js"></script>
<script>
$(function () {
$("#tabs").tabs();
});
</script>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab Header 1</a></li>
<li><a href="#tabs-2">Tab Header 2</a></li>
<li><a href="#tabs-3">Tab Header 3</a></li>
</ul>
<div id="tabs-1">
Content for Tab 1 goes here.<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="tabs-2">
Content for Tab 2 goes here.<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="tabs-3">
Content for Tab 3 goes here.<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
I know the references and script should be done through helpers but I'd like to see a full working code in case I was making any typo's. 我知道引用和脚本应该通过助手完成，但是我想看到完整的工作代码，以防万一我打错字了。
2 个解决方案
解决方案1
0 2015-05-22 14:24:33
Apart from using partials, which isn't my intention, the only thing I could find was http://getbootstrap.com/javascript/#tabs . 除了使用部分函数（这不是我的意图）之外，我唯一能找到的就是http://getbootstrap.com/javascript/#tabs 。
For it to work Bootstrap has to be installed, easiest done via NuGet. 为了使其正常工作，必须安装Bootstrap，最简单的方法是通过NuGet完成。
解决方案2
0 已采纳 2015-05-22 14:36:41
Even better: How to include javascript code in asp.net MVC4 View page? 更好的是： 如何在asp.net MVC4“查看”页面中包含javascript代码？
full page code is: 整页代码为：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Foo</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
</head>
<body>
<div id="sections">
<ul>
<li><a href="#section-1">section-1 </a></li>
<li><a href="#section-2">section-2 </a></li>
</ul>
<div id="section-1">
section-1 content............
</div>
<div id="section-2">
section-2 content............
</div>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
<script type="text/javascript">
$("#sections").tabs();
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.