Question

我没有在浏览器（Google Chrome）中获得jquery tabstrip的确切视觉样式。但是，我按照jquery UI过程的步骤没有得到所需的结果。所有选项卡内容都显示在页面上，而不单击任何选项卡。

我的代码是：

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Tabs</title>
    <link rel="stylesheet" href="~/Scripts/jquery-ui.css" />
    <script src="~/Scripts/jquery-1.9.1.js"></script>
    <script src="~/Scripts/jquery-ui.js"></script>
    <link rel="stylesheet" href="~/Content/style.css" />
    <script>
    $(function() {
    $( "#tabs" ).tabs();
    });
    </script>
    </head>
<body>

<div id="tabs">
      <ul>
        <li><a href="#tabs-1">Tab1</a></li>
        <li><a href="#tabs-2">Tab2</a></li>
        <li><a href="#tabs-3">Tab3</a></li>
      </ul>
    <div id="tabs-1">
         <p>Tab1 contents  </p>
    </div>

    <div id="tabs-2">
          <p>Tab2 contents  </p>
    </div>

    <div id="tabs-3">
          <p>Tab3 contents  </p>
    </div>
</div>

</body>
</html>

我错过了什么吗？我应该包含更多的java脚本文件吗？请告诉我。

提前致谢。

Answer 1

您的代码在jsfiddle.net/z5qWk /

工作

您应该查看脚本和样式表引用。通常，这可以通过检查浏览器开发人员工具并检查错误和网络选项卡来完成。

在ASP.NET MVC4中创建jquery tabstrip时出错

1 个答案: