Question

I don’t even know if I’m doing this correctly, but I thought I’d ask to get a better opinion. Basically what I’ve done is this: created an information/navigation bar that expands depending on tab clicked by the user. What I’m trying to add is the functionality to expand a certain tab and be forwarded to it (like what this link would do: <a href="#contactus">) based on a link earlier on the same page. I can’t seem to do it. The tab that should be opened is contained within a <ul><li> list and is hidden. I’ll include the code:

<div id="tab1"> 
<ul class="tablinks"> 
<li><span>Check-Out</span></li> 
<li><a onClick="show('tab2')">Payment</a></li>  
</ul> 
<table>
<tr>
    <td><img alt=Check-Out src="http://link.com/images/checkouticon.gif"     width=48px height=45></td>
    <td>
        <p style="font-family: arial,helvetica,sans-serif; font-size: 12px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px">information</p>
    </td>
</tr>
</table>  
<div class="tabbase"></div> 
</div> 
<!-- tab 2 --> 
                        <div id="tab2"> 
<ul class="tablinks"> 
<li><a onClick="show('tab1')">Check-Out</a></li> 
<li><span>Payment</span></li>
</ul> 
<table>
<tr>
    <td vAlign=top align=left><img alt=Check-Out src="http://link.com/images/paypalicon.gif" width=48px height=45></td>
    <td>
        <p style="font-family: arial,helvetica,sans-serif; font-size: 12px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px">information</p>
    </td>
</tr>
</table> 
<div class="tabbase"></div> 
</div> 

This is the CSS that affects it:

#tab1, #tab2, #tab3, #tab4, #tab5, #tab6, #tab7 { font-family: trebuchet ms, Helvetica, sans-serif; height:550px;}

#tab1, #tab2, #tab3, #tab4, #tab5, #tab6, #tab7 {
width: 750px;
font-family: "trebuchet ms", tahoma, verdana, sans-serif;
font-size: 11px;
}

#tab2, #tab3, #tab4, #tab5, #tab6, #tab7 {
display: none;
}

ul.tablinks {
width: 600px;
margin: 20px 0px 0px 0px;
padding: 0px;
list-style: none;
height: 23px;
display: block;
cursor: pointer;
border-bottom: 0px solid #fff;
}

ul.tablinks li {
display: inline;
float: left;
margin: 0px 4px 0px 0px;
padding: 0px;
}

ul.tablinks li a, ul.tablinks li a:visited {
display: block;
width: 79px;
height: 23px;
line-height: 23px;
text-align: center;
text-decoration: none;
font-weight: normal;
font-size: 11px;
background: url(http://link.com/images/tabout3.gif);
color: #ffffff;
}

ul.tablinks li span {
display: block;
width: 79px;
height: 23px;
line-height: 23px;
text-align: center;
text-decoration:underline;
font-weight: normal;
font-size: 11px;
}

ul.tablinks li a:hover,
ul.tablinks li a.hover {
background: url(http://link.com/images/tabover.gif);
color: #000;
}

ul.tablinks li a:active{
text-decoration:underline;
}

div.tabbase {
display: block;
height: 3px;
line-height: 8px;
font-size: 0px;
}

div.tabbase {
background: url(http://link.com/images/boxbase3.gif);
}

And last but not least this is the code that is within a .php external file that affects the hidden aspect of the tabs:

function show(id)
{
checkseo()
if (err == "1"){return;}
hide()
if(ie5 || ns6){
    //document.getElementById(id).style.display = "inline";
    document.getElementById(id).style.display = "block";
}
}

function hide(){
if(ie5 || ns6){
    document.getElementById('tab1').style.display = "none";
    document.getElementById('tab2').style.display = "none";
    document.getElementById('tab3').style.display = "none";
    document.getElementById('tab4').style.display = "none";
    document.getElementById('tab5').style.display = "none";
    document.getElementById('tab6').style.display = "none";
    document.getElementById('tab7').style.display = "none";
}
}

So the idea is to be able to insert a link earlier in the document to open the “Payment” tab. I tried something like this: <a href="#payments">Payment Information</a> and changed the tags for the list to: <li><span name="payments">Payments</span></li>. This didn’t work unless I had already clicked on the “Payments” tab and opened it and then clicked on the link. Then my screen would scroll down and focus on that area. Is there a way to have the screen scroll down and view the <span> without having to ‘open’ it first?

Thanks for all your help in advance. And I should note, that while I do have some ability with HTML, Javascript, and PHP, I’m still learning and don’t know all of the best ways of doing things.

Answer 1

The best (and easiest) way to code this is to use a JS framework like jQuery. It’ll help tremendously in normalizing the browser differences.

But if that’s not an option, let’s try to fix the existing code. <a href="#payments">Payment Information</a> will jump to an element with the id="payments", not name. Once you fix that, add an onClick="show('tab2')" to that <a>.

In the show function, what is the point of this code if(ie5 || ns6)? This is basically saying, if it’s IE5 or Netscape6, then show the element (assuming the variable ie5 and ns6 are set properly somewhere of course). Try removing this, I don’t think you need it.