Question

我正在使用jHipster来开发我的应用程序（JAVA + Angular JS）。

在我的html中，我有以下jquery UI标签的代码。

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

当我回到上一页并回到同一个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>

Answer 1

尝试在标题标记中移动样式和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>

Answer 2

正如我已经说过的，有一种简单的方法可以使用角度引导程序...

我已使用以下代码在我的应用程序中使用了标签。

<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>

Answer 3

你不应该组合Angular和jQuery（它是一个Angular反模式）。如果你真的想这样，你需要将标签代码移动到Angular控制器。

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

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

也许您应该考虑构建自定义标签指令。

E.g。像这里：https://thinkster.io/angular-tabs-directive

干杯

jQuery在第一次尝试时没有加载

3 个答案: