WordPress jquery problem

See Using_Javascript.

It’s doing exactly what you are asking it to do – Because you have a page reload it is reverting back to before the click event (as it should)

Basically,

1. the page loads and the text is black
2. the click function is fired and the text goes red
3. the page reloads… starts again from number 1.

If you were to remove the click function the id=”oneBtn” element would be red on doc load

<script type="text/javascript">

    $(document).ready(function(){
	$('#oneBtn').css('color','red');
    });  

  </script>

Hope that helps.

Lee.

lee@digitalacorn thanks i can see whats happening now but removing the click function isn;t going to work for me.

I need to change the colour of the text on the page when the btw is clicked.

but if the page reloads?

change the link your using as the click event href value to a hash would work.

If you don’t actually want to navigate anywhere and just change the heading’s colour, you need pass the event to the click’s callback and call e.preventDefault() to stop it doing it’s default action, which is change the page.

<script type="text/javascript">
$(document).ready(function(){
  $('#nav li a').click(function(e){
    $('#oneBtn').css('color','red');
    e.preventDefault();
  });
});
</script>

This is of course no good to you if you need the the page to change.

Thanks for all your responses I think I need another demo to try and explain my problem.

https://www.ttmt.org.uk/wordpress/

I’m trying to create a photo portfolio theme.

I want a portfolio that has more galleries inside it.

In my demo I have Transport as a portfolio that has Car, Planes and Boats inside it.

Transport is a page with Cars, Planes and Boats as child pages of Transport.

Each page has a NextGen slideshow as it’s content.

When you click Transport the child pages are displayed using this code.

https://pastebin.com/pAnSuJb1

This also displays the parent page Transport but this was added with

echo '<li id="firstBtn"><a href="'.get_permalink($post->post_parent).'">'.$parent_title.'</a></li>';

I can highlight the button clicked with current_page_item and current_page_parent so when the main Transport is clicked or the buttons below they turn red.

I want to change the color of Transport in the bottom menu when it’s clicked

I was trying to do this with Jquery, so when ‘#port-nav li a’ (Transport at top) is the clicked, ‘#firstBtn a’ (Transport in the bottom menu) would be red.

jQuery('#port-nav li a').click(function(){
        	jQuery('#firstBtn a').css('color','red');
    	});

This code flashes the link red until it reloads and returns to black.

How can I control the color of Transport in the bottom menu like the other links in that menu?

Hope this makes sense and someone can help – It’s driving me mad.

why could you not just style the li?

#firstBtn {color: red;}

Yes but I only want it red when it’s been clicked, which is why I was using query

#firstBtn {color: red;}

This would make it red all the time.

I’m I missing something here? – I’ve been trying to change the colour of one button for two days now I could be losing it.

could you not just add ‘include=$post->post_parent’ to the wp_list_pages query?

That would probably give you the same classes to style as the children.

Lee.