Question

这有点难以解释，但我无法弄清楚如何解决这个问题。基本上，对于学校的评估片，我必须创建8页的html，所有这些都带有模板和菜单。我的菜单由标签组成，我希望他们做的是在不同的页面上相互链接，这样当我点击＆＃39;关于＆＃39;我的索引页面上的标签，它将带我到我保存的html文件与＆＃39;关于＆＃39;页面内容。到目前为止，我已经能够做到这一点，但是当我点击选项卡将我带到单独的页面时，它会在Google Chrome中的新标签页中打开。我真的更喜欢它留在浏览器的同一个标签上，所以我不会丢失标记。

到目前为止我的代码：

$(document).ready(function(){
    $("#tabs").tabs({
        active: false,
        collapsible: true,
        beforeActivate: function (event, ui) {
            window.open($(ui.newTab).find('a').attr('href'), '_blank');
            return false;
        }
    });
})

和

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Units</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/jquery-1.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.structure.css"/>
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.structure.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.theme.css"/>
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.theme.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/style-1.css"/>
</head>

<body>
<table width="1346" height="215" border="0">
  <tr>
    <td width="1355" height="157"><p><img src="images/banner.jpg" width="1300" height="200" /></p></td>
  </tr>
  <tr>
    <td height="50">
    <div id="tabs">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="units.html">Units</a></li>
    <li><a href="student work.html">Student Work</a></li>
    <li><a href="survey.html">Survey</a></li>
    <li><a href="excursions.html">Excursions</a></li>
    <li><a href="vc.html">Vocational Certificate</a></li>
    <li><a href="contact.html">Contact Us</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>
    </td>
  </tr>
</table>
</body>
</html>

如果有人能提供帮助，那就太棒了！

Answer 1

尝试从_blank中删除window.open，如下所示：

$(document).ready(function(){
$("#tabs").tabs({
active: false,
collapsible: true,
beforeActivate: function (event, ui) {
    window.open($(ui.newTab).find('a').attr('href'));
    return false;
}
});
});

或者您可以使用_self代替_blank来用新窗口替换当前窗口。

以下是Explanation

jQuery ui tabs链接到单独页面上的选项卡

1 个答案: