Javascript 第一次尝试时未加载jQuery_Javascript_Jquery_Html_Angularjs_Jhipster

Javascript 第一次尝试时未加载jQuery

javascript jquery html angularjs jhipster

Javascript 第一次尝试时未加载jQuery,javascript,jquery,html,angularjs,jhipster,Javascript,Jquery,Html,Angularjs,Jhipster,我正在使用jHipster开发我的应用程序JAVA+AngularJS 在我的html中，我有以下jQueryUI选项卡代码当我启动应用程序并转到相应页面时，我看不到预期的样式，而且单击按钮也不起作用当我回到上一个页面，回到同一个jquery加载的页面时，它这次起作用了为什么会发生这样的事注: 我将样式类和js文件导入放在同一个html文件中。如果我要将这些条目更改为index.html文件，那么在第二次尝试时它将不起作用还尝试将脚本包含在单独的文件中。与上述相同的结果即使在第二次尝试

我正在使用jHipster开发我的应用程序JAVA+AngularJS

在我的html中，我有以下jQueryUI选项卡代码

当我启动应用程序并转到相应页面时，我看不到预期的样式，而且单击按钮也不起作用

当我回到上一个页面，回到同一个jquery加载的页面时，它这次起作用了

为什么会发生这样的事

注: 我将样式类和js文件导入放在同一个html文件中。如果我要将这些条目更改为index.html文件，那么在第二次尝试时它将不起作用

还尝试将脚本包含在单独的文件中。与上述相同的结果即使在第二次尝试中也不起作用

任何人都可以推荐我

另外，如果有人在jhipster的标签上工作，请告诉我怎么做

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.    Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa  lectus.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tilorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, tur lorem enim, pretium nec, feugiat nec, luctus a, lacus.  </p>
  </div>
 </div>

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

 <script>
$(document).ready(function() {
    alert('ready!!');
    $(function () {
        $("#tabs").tabs();
    });
});
 </script>

您不应该将Angular和jQuery组合在一起—这是一种Angular反模式。如果您真的想这样做，您需要将选项卡代码移动到角度控制器

var myApp = angular.module('myApp',[]);

myApp.controller('GreetingController', ['$scope', function($scope) {
  $(function () {
    // angular template content loaded
    $("#tabs").tabs(); //anti pattern!!!
  });
}]);

也许您应该考虑构建一个自定义tabs指令

例如，像这里：

干杯

尝试移动标题标签中的样式和js

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Tabs - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#tabs" ).tabs();
  } );
  </script>
</head>
<body>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.    Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa  lectus.</p>
    </div>
    <div id="tabs-2">
        <p>Morbi tilorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
    </div>
    <div id="tabs-3">
        <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, tur lorem enim, pretium nec, feugiat nec, luctus a, lacus.  </p>
    </div>
 </div>


</body>
</html>

正如我已经说过的，有一种简单的方法可以使用角度引导来实现这一点

我用下面的代码实现了在我的应用程序中使用标签

<uib-tabset active="activeJustified" justified="true">
    <uib-tab index="0" heading="Incharges">
    </uib-tab>
    <uib-tab index="1" heading="News">
    </uib-tab>
    <uib-tab index="2" heading="Meetings">
    </uib-tab>
    <uib-tab index="3" heading="Gallery">content</uib-tab>
</uib-tabset>

你的控制台中有错误吗？控制台中没有错误。你检查过我更新的答案吗？这是一个评论内容，不是答案。@Stefan，谢谢，但是你有没有关于你所说方式的例子？是的，但是我不能用少于50个代表来评论。我还回答了他的问题：“你需要将标签代码移动到你的角度控制器上”@SmartDeveloper我更新了答案，为了更明确一点，我尝试了在index.htmls中添加标签。我会得到同样的问题。我已经更新了完整的html代码。在新文件中复制并通过它，您将看到它将像我在图中显示的那样工作。