On this site I'm redesigning, http://www.graniteschools.org/hs/tay...New/index.html, I need the tabs on the top to be active when you are on the page. As of right now, you have to have <li class="active"> manually for each page. Now I have each page as a template and I can't change it for each page. Is there a script I can use to have the tabs automatically change to active for the current page you're on? Click on 'Departments' and you'll see how the 'Home' tab stays active because the html is the same. Thanks.

You can do this with php, which I would recommend.

PHP Code:

<li <?php if ($page == "main") echo 'class="active"'?>>MAIN</a>
<li <?php if ($page == "pages") echo 'class="active"'?>>PAGES</a>
<li <?php if ($page == "other") echo 'class="active"'?>>OTHER</a>

And on the page defining the variable:

PHP Code:

<?php $page = "main"; ?>

- Steve

http://www.modtalk.co.uk/article/dhtml-tabs/

Okay thanks stevej, I'll give that a try!

odha:
Before you go chucking about negative rep points maybe you should have looked at the demo page that does exactly what you asked for.
http://www.modtalk.co.uk/_site/code/...ipt/show-hide/

and just to add, you can't actually set the tab "active" using server side code BECAUSE you never go back to the server to get the next "tab" content

Hmm. Well I don't quite know how I can implement your Simple Tabs into my site.

You don't need to use the entire script and the code. It's just the principles you need.

as you switch tabs you change the classname of the the clicked tab to whatever your active class all the other tabs get set to the default.

For the tabs that open a new URI you simply call the same routine when the page opens to set the appropriate tab.
at the end of the script block you'll see "show('one');" this is "tells" the page which is the "active" tab.

Well maybe I just don't understand the script then.

I need something that I don't have to modify for each page; it just compares the url you're on to the url the tab is linked to.

IF there is a way to do this as you say, that would be great! Otherwise, I might be out of luck. I've search the internet and haven't really found a solution to my problem:

I need a script, my host doesn't support php, that can be the same on every page, and it recognizes which page your on and sets a certain tab to 'active' without me changing the script for each page.

Thanks!

I think there has been a simple misunderstanding here. If you can put this script on every page, it will do the trick:

<script type=text/javascript">
(function() {
var a = document.getElementById("top_nav").getElementsByTagName("a");
for(var i=0; i<a.length; i++) {
     if(a[i].href == window.location)
               a[i].className = "active";
}
})()
</script>

Now, style the class, "active" in your CSS document, however you like.

Well I implemented that script, and it didn't work. Thanks though! I've realized that there just isn't a way to do what I want it to do. You can look at the new script for yourself: http://www.graniteschools.org/hs/tay...new/index.html

The script I gave you will do exactly as you requested. What is required is for you to take extra step to actually style the class "active" (on the <a> not the <li>). Be sure to put it at the bottom of the page, where it will actually work.

I don't see anything new about the new "script" you linked to.

The new script is up there, but I'm not sure how I style the a so that it has the background of the active tab. Also, will this activate the Departments tab even if it is on a page like /New/departments/business/businessindex.html?

Sorry for all the questions and the delayed response. Thanks for your time on this issue!