Ok, so I'm a Javascript and jqyery noob, so looking for help.
I have a CSS menu bar that is used as an element across my site. an individual button can be shown as clicked by assigning a class to the element of pressed
. The first link that I have is showing as pressed. I can access the URL easily in my view so I know where I am, but I want to be able to change the class on the fly as the page loads depending on where the url is, so the menu will show selected for that area. I've included two elements of my menu below. I want to change 'class'=> 'pressed'
to 'class'=> ''
depending on the value in a variable. How would I do this?
<ul id="menuBar" class="topmenu">
<input type="checkbox" id="css3menu-switcher" class="switchbox">
<label onclick="" class="switch" for="css3menu-switcher"></label>
<li class="topfirst">
<?php
echo $this->Html->link(
$this->Html->image('icons/group.png', array('width' => '20', 'line-height' => '20'))
. ' ' . __('Organisations'),
array('controller' => 'organisations', 'action' => 'index'),
array('escape' => false, 'class'=> 'pressed'));
?>
<ul>
<li> <?php
echo $this->Html->link(
$this->Html->image('icons/group_add.png', array('width' => '20', 'line-height' => '20'))
. ' ' . __('New Organisation'),
array('controller' => 'organisations', 'action' => 'add'),
array('escape' => false));
?></li>
</ul>
</li>
<li class="topmenu">
<?php
echo $this->Html->link(
$this->Html->image('icons/telephone.png', array('width' => '20', 'line-height' => '20'))
. ' ' . __('Contacts'),
array('controller' => 'contacts', 'action' => 'index'),
array('escape' => false));
?>
<ul>
<li> <?php
echo $this->Html->link(
$this->Html->image('icons/telephone_add.png', array('width' => '20', 'line-height' => '20'))
. ' ' . __('New contact'),
array('controller' => 'contacts', 'action' => 'add'),
array('escape' => false, 'class'=> 'unpressed'));
?>
</ul>
</li>
</ul>
Below are the two expected html outputs for either way:
<li class="topmenu">
<a href="/dev/oak/trunk/contacts">
<img width="20" alt="" line-height="20" src="/dev/oak/trunk/img/icons/telephone.png">
Contacts
</a></li>
<li class="topmenu">
<a class='pressed' href="/dev/oak/trunk/contacts">
<img width="20" alt="" line-height="20" src="/dev/oak/trunk/img/icons/telephone.png">
Contacts
</a></li>
I think you can achieve this purely by CSS.
Make all your < a > tags have this class .changeIfActive
Your HTML will look something like
<a href="your/link/here" class="changeIfActive"> Some text </a>
add to your CSS this class
a.changeIfActive{color:white; background:black;}
a.changeIfActive:active{color:black; background:white;}
Now when user is viewing the target page the CSS will do the CSS class changing using its Psudo-class feature
More information please refer to http://www.w3schools.com/css/css_pseudo_classes.asp
Dz1 Answered
From what you just said, use "removeClass" to remove the one you want to remove, then "addClass" to add the one that will change the background. –
Try this:
$("li.topmenu > a").click(function(){
$("li.topmenu > a").removeClass('pressed');
$(this).addClass('pressed');
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.