Oh sorry, you do have the jQuery UI CSS code linked in your HTML.
Can you please show us the JavaScript code that you are currently also using for the page?
what you mean by javascript code is it jquery 1.9.1 and jquery.ui.js ? because when i upload jquery 1.9.1 . It shows 500 internal server error.
What I mean is the JavaScript code that you are using for the tabs. Such as:
$("#tabs").tabs({
activate: function(event, ui) {
localStorage.selectedTab = ui.newTab.index() + 1;
},
active: (localStorage.selectedTab) ? localStorage.selectedTab - 1 : 0
});
the javascript such that when press refresh button, it will remain at same tab or the javascript that make the tab such that each content appear at individual tab.
Meanwhile, with the HTML the tabs can be got working.
The id="tabs" is currently in the wrong place. It needs to be removed from the <ul> tag and moved up to the pagewidth div.
Also, the <nav> elements need to be moved outside of the `
- ’ ones.
After doing that you’re left with the following structure, which results in having the tabs properly appear:
<div id="tabs" class="pagewidth">
<nav>
<ul>
<li><a href="#tab1" >Live</a></li>
<li><a href="#tab2" >Con</a></li>
<li><a href="#tab3" >Ref</a></li>
<li><a class="logout" a href="#tab4" >Log</a></li>
</ul>
</nav>
</div>
After doing that, you just need to get the content sections in the right place, which I’ll focus on next.
When the tabs are working, regardless of whether they use the fragment identifier, cookies, or localstorage technique, the refresh will then work as you expect.
You have to get the tabs working first. Don’t put the cart before the horse.
currently i am using the one you previous told me. But apparently, iframe seem to be not working as it show 4 white rectangular box.
After getting the tabs showing, we can move on to getting them working.
Do you have them showing yet?
After they are showing, the content sections need to appear directly below the <nav> section, still within the id="tabs" div. Then the content sections will work.
so all my content for tab1,tab2,tab3 need to be under NAV but still under DIV ?
The id="tabs" element, wherever you put it, needs to surroud both the navigation and the content.
Is this correct ?
<body>
<div id="container">
<div id="header" class="gradient backgroundColor">
<div class="pagewidth">
``` <div id="tabs" >```
`` <nav>``
``` <ul>```
``` <li>```
``` <a href="#tab1" >Live</a>```
``` </li>```
``` <li>```
` `` <a href="#tab2" >Con</a>```
``` </li>```
``` <li>```
``` <a href="#tab3" >Ref</a>```
``` </li>```
``` <li >```
``` <a class="logout" a href="#tab4" >Log</a>```
``` </li>```
``` </ul>```
``` </nav>```
``` <div id="main" class="pageWidth">```
``` <div class="container pagewidth" id="tab1">```
``` <div class="panel" id="imagearea">```
``` <div img class="image-bank">```
``` <div class="image-toolbar">```
``` <span class="panel-heading" style="color:pink">Please</span>```
``` <span class="panel-heading" >update </span>```
``` </div>```
``` </div>```
``` <div class="panel" >```
``` <div class="panel-heading">Information</div>```
``` <div class="panel-content">```
``` <table>```
``` <tr>```
``` <th>Number:</th>```
```</tr>```
``` <tr>```
``` <th>No:</th>```
``` </tr>```
``` <tr>```
``` <th>Yes:</th>```
``` </tr>```
``` </table>```
``` </div>```
``` </div>```
``` </div>```
``` </div>```
<div class="container pagewidth" id="tab2">
<div class="panel">
<div class="panel-heading">Command</div> <div class="panel-content" id="calibration-panel-content"> <table> <tr> <th> <label label-for="">Type in</label>
</th>
``` </tr>```
``` </table>```
``` </div>```
``` </div>```
``` <div class="panel" id="calibration-panel-content">```
``` <div class="panel" id="imagearea">```
``` <img class="image-bank image">```
``` <div class="image-toolbar">```
``` <span class="panel-heading" style="color:pink">Click on to display.</span>
<span class="panel-heading" >Updated </span>
<input class="large ui-button" type="button" onClick="window.location.reload();" VALUE="Refresh" >
</div> ```
``` </div>```
``` </div>```
</div>
<div class="container pagewidth" id="tab3">
<div class="panel" id="imagearea">
<div class="panel">
<div class="panel-content" id="calibration-panel-content"> <div class="panel" id="imagearea"> <img class="image-bank image"> <div class="image-toolbar"> <span class="panel-heading" style="color:pink">Click on to display.</span> <span class="panel-heading" >Updated </span> <input class="large ui-button" type="button" onClick="window.location.reload();" VALUE="Refresh" >
</div>
``` </div>```
``` </div>```
``` </div>```
``` </div> ```
</div>
<div class="container pagewidth" id="tab4">
<div class="paragraph"
```<p>Log?</p> ```
``` </div>```
``` <table width=800px align=center>```
``` <tr height=12px></tr>```
``` <tr height = 60px>```
``` <td rowspan=2 id="menu" width=150px>```
``` <table id="vert_menu" align=center>```
``` <div class="previous">```
``` <input type=button value="Yes" class=menubutton onclick=" window.close(); ```window.open('http://yahoo.com') " >```
</div>```
``` <div class="next">```
``` <input type=button value="No" class=menubutton onclick=" window.close(); window.open('http://google.com') " > ```
``` </div>```
``` </table>```
``` </td>```
``` </table>```
</div>
``` </div>```
``` </div>```
``` </div>```
`` ```
Before you work on the content, do you first have the tabs properly showing?
yes. all the tabs appear
since for all these 4 tab, the url is the same. Is there a way to change such that when i press first tab, behind part of url display #1. This might make it easier for me to redirect to same tab or other tab if i want. ( more flexible).
Sure, you can remove the localstorage and just use the following:
$("#tabs").tabs();
You can also have the tabs automatically load in the content, by linking to the external location instead, with:
<nav>
<ul>
<li><a href="tab1.html">Live</a></li>
<li><a href="tab2.html">Con</a></li>
<li><a href="tab3.html">Ref</a></li>
<li><a href="tab4.html">Log</a></li>
</ul>
</nav>
so for this $(“#tabs”).tabs(); , where do i put ? script.js or just before where i need <script> $("#tabs").tabs(); </script>
i tried to use that but apparently, it did not work. What i want is for third tab when i press refresh button, it will reload the page and stay at third tab. While when i go to the fourth tab, when i click yes, it will direct me to the first tab. What i use now for the yes button, i just put window.location.reload(); as whenever i reload, it will go to the first tab. So i am finding a way so that when i press any button, i can assign it to the tab that i want to. or even after reload, stay at the same tab. Is it possible ?
Is it possible for you to put the page online somewhere?
That’s the easiest way to see what you currently have.
Hi, where do you suggest to post at ? Anyway is there any method you will use so that when u refresh tab, we can assign it to either stay at same tab or go to another tab even when the url is the same for all 4 tabs.