This plugin makes it easy for you to dynamically select the states of form elements and CSS objects at page load time. You pass the value you’re evaluating in the item parameter. That will always be some sort of variable, like a segment. Then you use a variable to handle the output of the selected state.
To give you an example:
<ul id="nav">
{exp:selected item="{segment_1}" replace="class=’selected‘“}
<li id="nav1" class="first"><a href="/" {selected_null}>Home</a></li>
<li id="nav2"><a href="/topics" {selected_topics}>Topics</a></li>
<li id="nav3"><a href="/news" {selected_news}>Daily News</a></li>
<li id="nav5"><a href="/archives" {selected_archives}>Archives</a></li>
<li id="nav7"><a href="/subscribe" {selected_subscribe}>Subscribe</a></li>
<li id="nav8"><a href="/advertisers" {selected_advertisers}>Advertisers</a></li>
{/exp:selected}
</ul> <!-- nav -->
Whenever “item” is matched, it is replaced. In the case of www.example.com/archives, this would result in this rendered code:
<ul id="nav">
<li id="nav1" class="first"><a href="/">Home</a></li>
<li id="nav2"><a href="/topics" class="selected">Topics</a></li>
<li id="nav3"><a href="/news">Daily News</a></li>
<li id="nav5"><a href="/archives">Archives</a></li>
<li id="nav7"><a href="/subscribe">Subscribe</a></li>
<li id="nav8"><a href="/advertisers">Advertisers</a></li>
</ul> <!-- nav -->
More information here.
