Web Hosting Talk







View Full Version : Simple javascript help, for a menu


xmdsys
08-12-2008, 08:33 PM
I don't know javascript and haven't had time to learn it yet so until then, could somebody help me out with this...

http://readsam.com/markup/test/tabs_test.php- click "show" button

What I am trying to do is get the menu categories (football, basketball, etc.) to change background color when it has been selected. Only the tab being displayed currently will have the black background (used black to see it easier). All that needs to change is the class on the li tag to "active" when it is active.

The js is here: http://readsam.com/markup/test/js/tabs.js

the function that controls the changing of the "tabs" is initsTabs()

I tried to figure this out on my own but I'm at that point where I don't think I will without help...I need to learn js...

foobic
08-12-2008, 11:21 PM
Not the only way to do it, but a relatively easy one, just extending the same pattern it's using already:
In your PHP script where it's writing the list of links, add ids to the output the same way as the blocks are written, so you get:
<ul class="popup-list stabset">
<li id="li-stats-tab1" class="active">
<a class="stab" href="#stats-tab1">FOOTBALL</a>
</li>
<li>
<a id="li-stats-tab2" class="stab" href="#stats-tab2">BASKETBALL</a>
</li>
etc.

Then in your javascript, extend the onclick function like this:
links[j].onclick = function ()
{
var c = document.getElementById(this.href.substr(this.href.indexOf("#") + 1));
if (c)
{
//reset all tabs before change
for (var i = 0; i < this.tabs.length; i++)
{
var tab = document.getElementById(this.tabs[i].href.substr(this.tabs[i].href.indexOf("#") + 1));
if (tab)
{
tab.style.display = "none";
}
this.tabs[i].className = this.tabs[i].className.replace("active", "");
}
this.className += " active";
c.style.display = "block";
this.className += " active";
c.style.display = "block";

// return false;
}

//New stuff starts here:
var c2 = document.getElementById('li-'+this.href.substr(this.href.indexOf("#") + 1));
if (c2)
{
//reset all li before change
for (var i = 0; i < this.tabs.length; i++)
{
var li = document.getElementById('li-'+this.tabs[i].href.substr(this.tabs[i].href.indexOf("#") + 1));
if (li)
{
li.className = li.className.replace("active", "");
}
}
c2.className += " active";;

return false;
}
}

Warning: untested. YMMV ;)

xmdsys
08-13-2008, 12:14 AM
hmm, it's not working for me. I've got an idea I'm gonna try out, hopefully it works. Thanks for the help!

xmdsys
08-13-2008, 02:16 AM
Well, I feel like a retard. I just had to make a quick edit to the css and I was good to go. Can't believe I didn't think of it before, lol. Thanks anyway foobic!

Mods, you can close this thread.