1

Maybe the title is not that descriptive of my problem but here i'll give more details.

So, I have this web-site where the menu is a list, each list item is an anchor () to a different page. So far i've made it possible that when i hover on the li it changes the property of the text to strikethrough (using css: text-decoration:line-through).

BUT

how can i make it that after i click one of the menu's item the item clicked(the page im on) will remain with the strikethrough effect?

For example, im on 'home-page' and its name in menu is strike-throughe'd when i move to 'reservation', the 'home-page' clears the strikethrough effect and the 'reservation' gets the strikethrough effect?

I hope i made it clear what im looking for and somebody can help me with a solution to this!

Thanks in advance!

Abigal
  • 39
  • 1
  • 6
  • 1
    You can do it with javascript evaluate actual url page and then apply a class to the element // Or with CSS assign a class to the body of each page .... You need to paste some code here – DaniP Jun 10 '16 at 13:32
  • http://stackoverflow.com/a/10646813/2887133 --- or --- http://stackoverflow.com/a/26317374/2887133 – DaniP Jun 10 '16 at 13:36
  • Looking forward to your answers, thanks! – Abigal Jun 10 '16 at 13:52

2 Answers2

0

When generating page your can tell which menu item should be "strikethroughed", so you add class that has text decoration.

<div>
    <ul>
        <li class="selected"><a href="home.php">HOME</a></li>
        <li><a href="about.php">ABOUT</a></li>
        ....
    </ul>
</div>

In css:

li.selected a { text-decoration:line-through; }

In order to change it without re-rendering page you have to use Javascript:

$("li").click(function(event){
  $("li").removeClass("selected");
    $(this).addClass("selected");
});

JSfiffle Example

natchkebiailia
  • 611
  • 4
  • 18
0

Like DaniP commented on your question you should do this with the help of CSS classes.

For example: When clicking on e menu item remove the CSS class (e.g. 'active') from all menu item elements add add it only to the clicked one. The CSS class should define the strikethrough effect.

Setup an event handler:

$('li a.menuItem').click(function(event) {
    $('li a.menuItem').removeClass('active'); // remove class from all menu items
    $(this).addClass('active'); // add active class to clicked menu item
});
Eytibi
  • 545
  • 6
  • 12
  • using javascript or how? – Abigal Jun 10 '16 at 13:45
  • @Abigal exactly. I added some peace of code to achieve this – Eytibi Jun 10 '16 at 13:51
  • i dont really know jQuery, what's a.menuItem?? I mean a is the anchor but the menu item? – Abigal Jun 10 '16 at 14:04
  • the menuItem is just a CSS class to specify which anchors should be matched by this function – Eytibi Jun 10 '16 at 14:09
  • ok got it. but im using wordpress, i don't have the file to add my own class to the element, im trying to do so with document.getElementsByTagName.setAttribute and then using your code to add/remove the class but it's not working.. – Abigal Jun 10 '16 at 14:41
  • Hopefully looking at how to [change an elements class with javascript](http://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript) helps out here. – Eytibi Jun 10 '16 at 14:59