Question

我试图让标签工作，一个类似的线程，asp.net mvc 4 tabs有代码和步骤，（这里没有复制代码），并且被复制并插入到视图/编辑中，但显示的是代替标签如下所示。它出现像这样的项目符号。我安装了jquery 1.10.2和jquery-ui-1.11.4。使用F12开发人员工具在IE中运行会引发错误：SCRIPT438：对象不支持属性或方法＆＃39;标签＆＃39; （红色）。添加页面源

Edit

- Tab Header 1 
- Tab Header 2
- Tab Header 3

Content for Tab 1 goes here.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Content for Tab 2 goes here.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Content for Tab 3 goes here.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

页面来源：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edit - My ASP.NET Application</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

    <link href="/Content/jquery-ui.theme.css" rel="stylesheet"/>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>

    <script src="/Scripts/modernizr-2.6.2.js"></script>  
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">Application name</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/">Home</a></li>
                    <li><a href="/Home/About">About</a></li>
                    <li><a href="/Home/Contact">Contact</a></li>
                </ul>
                    <ul class="nav navbar-nav navbar-right">
        <li><a href="/Account/Register" id="registerLink">Register</a></li>
        <li><a href="/Account/Login" id="loginLink">Log in</a></li>
    </ul>

            </div>
        </div>
    </div>
    <div class="container body-content">

<h2>Edit</h2>

<form action="/projdata/Edit/1" method="post"><input name="__RequestVerificationToken" type="hidden" value="Js3r6Hbqf97HjLY3HmHUWxtYHGuKYUfXM8EAFrcrHPJyTr_5L5VYUInp2bKtfBDg8H2IIRDIULE9qjnXZd5CXXecT4" />    <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>
<input data-val="true" data-val-number="The field ID must be a number." data-val-required="The ID field is required." id="ID" name="ID" type="hidden" value="1" />            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Save" class="btn btn-default" />
                </div>
            </div>
</form>
<div>
    <a href="/projdata">Back to List</a>
</div>
<script type="text/javascript">
    $(function () {
        $("#tabs").tabs();
    });
</script>

        <hr />
        <footer>
            <p>&copy; 2015 - My ASP.NET Application</p>
        </footer>
    </div>

    <script src="/Scripts/jquery-1.10.2.js"></script>

    <script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>


    <script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>



<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome","requestId":"624ee73d42e74fd5327ad4587452094e"}
</script>
<script type="text/javascript" src="http://localhost:42101/4ed1035aad3df5c541b08a3cafadac287d4b/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

Answer 1

OP找到的解决方案：

我发现了问题，在Edit.cshtml中有2个缺少jqueryui引用：

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryui")
}

在BundleConfig.cs中：

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                "~/Scripts/jquery-ui*"));

jQuery UI选项卡不显示

1 个答案: