Question

我正在学习如何使用jquery并且有一个noob问题。来自jquery-ui（http://jqueryui.com/tabs/#ajax）：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tabs - Content via Ajax</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
  $( "#tabs" ).tabs({
    beforeLoad: function( event, ui ) {
      ui.jqXHR.error(function() {
        ui.panel.html(
          "Couldn't load this tab. We'll try to fix this as soon as possible. " +
          "If this wouldn't be a demo." );
      });
    }
  });
});
</script>
</head>
<body>

<div id="tabs">
<ul>
  <li><a href="#tabs-1">Preloaded1</a></li>
  <li><a href="#tabs-2">Preloaded2</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 et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id='tabs-2'>
Look, it's working!
</div>
</div>
</body>
</html>

当我尝试将这个html文件与＃tabs-1附加到URL时，它可以正常工作。但是，将URL更改为＃tabs-2后，没有任何反应。我必须再次刷新它以显示第二个选项卡。有没有办法通过只刷新一次来实现这一点？

Answer 1

$(function() {
  $( "#tabs" ).tabs({
    beforeLoad: function( event, ui ) {
      ui.jqXHR.error(function() {
        ui.panel.html(
          "Couldn't load this tab. We'll try to fix this as soon as possible. " +
          "If this wouldn't be a demo." );
      });
    }
  });
    $(window).on('hashchange', function() {
      $("div#tabs a[href="+window.location.hash+"]").click();  
    });
});

jQuery使用＃url标记多次刷新

1 个答案: