Title: WordPress jquery problem
Last modified: August 20, 2016

---

# WordPress jquery problem

 *  [ttmt](https://wordpress.org/support/users/ttmt/)
 * (@ttmt)
 * [14 years ago](https://wordpress.org/support/topic/wordpress-jquery-problem/)
 * Hi all
 * I have a super simple WP site here as a demo
 * [http://www.ttmt.org.uk/forum/wordpress](http://www.ttmt.org.uk/forum/wordpress)
 * It’s a header.php, footer.php, index.php and page.php.
 * I have one page with a title of Page that uses page.php as it’s template. The
   header list the pages so has ‘Page’ in the header.
 * Page.php simple has <h4 id=”oneBtn”>Red</h4>
 * In header.php I have this jquery to change the color of #oneBtn on Page.php when
   the button in the header in clicked.
 *     ```
       <script type="text/javascript">
   
           $(document).ready(function(){
           	$('#nav li a').click(function(){
       		$('#oneBtn').css('color','red');
       	});
           });  
   
         </script>
       ```
   
 * This doesn’t work and I can’t see why.
 * Once the page has loaded and the Page button in the header is clicked again the‘
   Red’ text flashes red then returns to black.
 * Can anyone explain why the text in the page won’t stay red.

Viewing 9 replies - 1 through 9 (of 9 total)

 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [14 years ago](https://wordpress.org/support/topic/wordpress-jquery-problem/#post-2638681)
 * See [Using_Javascript](http://codex.wordpress.org/Using_Javascript).
 *  [lee@digitalacorn](https://wordpress.org/support/users/leedigitalacorn/)
 * (@leedigitalacorn)
 * [14 years ago](https://wordpress.org/support/topic/wordpress-jquery-problem/#post-2638690)
 * 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.
 *  Thread Starter [ttmt](https://wordpress.org/support/users/ttmt/)
 * (@ttmt)
 * [14 years ago](https://wordpress.org/support/topic/wordpress-jquery-problem/#post-2638706)
 * 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.
 *  [lee@digitalacorn](https://wordpress.org/support/users/leedigitalacorn/)
 * (@leedigitalacorn)
 * [14 years ago](https://wordpress.org/support/topic/wordpress-jquery-problem/#post-2638711)
 * but if the page reloads?
 * change the link your using as the click event href value to a hash would work.
 *  [nouveller](https://wordpress.org/support/users/nouveller/)
 * (@nouveller)
 * [14 years ago](https://wordpress.org/support/topic/wordpress-jquery-problem/#post-2638731)
 * 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.
 *  Thread Starter [ttmt](https://wordpress.org/support/users/ttmt/)
 * (@ttmt)
 * [14 years ago](https://wordpress.org/support/topic/wordpress-jquery-problem/#post-2638745)
 * Thanks for all your responses I think I need another demo to try and explain 
   my problem.
 * [http://www.ttmt.org.uk/wordpress/](http://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.
 * [http://pastebin.com/pAnSuJb1](http://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.
 *  [lee@digitalacorn](https://wordpress.org/support/users/leedigitalacorn/)
 * (@leedigitalacorn)
 * [14 years ago](https://wordpress.org/support/topic/wordpress-jquery-problem/#post-2638749)
 * why could you not just style the li?
 *     ```
       #firstBtn {color: red;}
       ```
   
 *  Thread Starter [ttmt](https://wordpress.org/support/users/ttmt/)
 * (@ttmt)
 * [14 years ago](https://wordpress.org/support/topic/wordpress-jquery-problem/#post-2638754)
 * 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.
 *  [lee@digitalacorn](https://wordpress.org/support/users/leedigitalacorn/)
 * (@leedigitalacorn)
 * [14 years ago](https://wordpress.org/support/topic/wordpress-jquery-problem/#post-2638760)
 * 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.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘WordPress jquery problem’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 9 replies
 * 4 participants
 * Last reply from: [lee@digitalacorn](https://wordpress.org/support/users/leedigitalacorn/)
 * Last activity: [14 years ago](https://wordpress.org/support/topic/wordpress-jquery-problem/#post-2638760)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics