CODEWITHSUNDEEP
jqueryhtmltabs
Isabella
Isabella

Reputation: 77

jQuery ui tabs link to tabs on separate page

This is a little hard to explain but I have not been able to figure out how to fix this. Basically, for an assessment piece for school I have to create 8 pages of html, all with a template and a menu. My menu is made up of tabs and what I want them to do is link to each other on separate pages so that when I click on the 'About' tab on my index page, it will take me to my saved html file with the 'About' page content. So far I have been able to do this, but when I click on the tab to take me to my separate page, it opens in a new tab in google chrome. I would really prefer for it to stay on the same tab in the browser so I don't loose marks.

My code so far:

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

and 

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

If anyone could help it would be awesome!

Upvotes: 1

Views: 401

Answers (1)

Senjuti Mahapatra
Senjuti Mahapatra

Reputation: 2590

Try removing _blank from window.open like this:

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

Or you can use _self instead of _blank to replace the current window with a new window.

Here is the Explanation

Upvotes: 2

Related Questions