Форумы / Cotonti / Skins / Current class on ID problem

Twiebie
#1 12.07.2011 00:04

I'm using a jQuery lavalamp menu with the following HTML:

<div id="menu">
    <ul class="menu">
        <li><a href="index.php"><span>Home</span></a></li>
		
        <li id="school"><a href="#"><span>School</span></a>
            <div><ul>
                <li><a href="plug.php?e=contact"><span>Contact</span></a></li>
                <li><a href="#"><span>Organisation</span></a></li>
                <li><a href="#"><span>Membership</span></a></li>
                <li><a href="#"><span>Research</span></a></li>
            </ul></div>
        </li>
		
        <li id="newscat"><a href="page.php?c=newscat"><span>News</span></a>
            <div><ul>
                <li><a href="page.php?c=newscat"><span>Archive</span></a></li>
                <li><a href="#"><span>Activities</span></a></li>
                <li><a href="#"><span>Agenda</span></a></li>
                <li><a href="#"><span>Newsletter</span></a></li>
            </ul></div>
        </li>
		
        <li id="links"><a href="page.php?al=links"><span>Links</span></a></li>
    </ul>
</div>

I'm using ID's for every <li> item, and i've put in the custom.TPL files such as page.list.newscat.tpl the following JavaScript:

<script type="text/javascript">
var element = document.getElementById("newscat");
element.className = element.className + "current";
</script>

This works fine and applies the 'current' class to the according <li> menu item when that page is opened via the menu link.
The problem is though, that this does not work anymore when for example a page is being edited because the url then turns into 'page.php?m=edit&id=18'. Because of this the current class is lost..

How can I solve this?

Отредактировано: Twiebie (12.07.2011 00:14, 12 лет назад)
GHengeveld
#2 13.07.2011 16:01

Do you have the JavaScript code on every page (including the edit page)?

I think you're missing a space before 'current' in your script (right now it seems you're appending 'current' to any existing class).

There are various ways to set a class on the active menu item. One way is to use JavaScript to match the current page URL to the URL of the menu item, which is what we do on Cotonti.com. We can safely do this because we use URL rewrites so we have no problems with lower-level pages such as an edit page. Look in the sourcecode for the setActiveTab function. Another way, which is neater but more complex, is to use CoTemplate to dynamically set a class. You can use variables such as {PHP.z} and {PHP.e} in combination with template logic or a callback function to match a menu item to the current page.

See also this topic.