javascript - replacing header text on jQuery click event -
i trying replace text in h3 tag based on jquery click event. however, code not working , if put alert statement inside click event, can see reacting inside function not able execute text() call.
header html markup
<div class="section margin-top-50"> <h3 id="page_header" class="section-height"><?php echo $this->translate('text_1'); ?></h3> </div>
menu html markup (where defining click events)
<ul id="mytab" class="nav nav-layout-sidebar nav-stacked"> <li class="active"> <a href="#mood-graph" data-toggle="tab"> <?php echo $this->translate('text_1') ?> </a> </li> <li> <a href="#quick-mood-stats" data-toggle="tab"> <?php echo $this->translate('text_2') ?> </a> </li> <li> <a href="#mood-rating" data-toggle="tab"> <?php echo $this->translate('text_3') ?> </a> </li> </ul>
js
$(document).ready(function() { $("ul#mytab li:nth-child(1)").click(function() { alert('clicked 1'); $("#page_header h3").text("<?php echo $this->translate('text_1'); ?>"); }); $("ul#mytab li:nth-child(2)").click(function() { alert('clicked 2'); $("#page_header h3").text("<?php echo $this->translate('text_2'); ?>"); }); $("ul#mytab li:nth-child(3)").click(function() { alert('clicked 3'); $("#page_header h3").text("<?php echo $this->translate('text_3'); ?>"); }); });
change -
$("#page_header h3")
to -
$("#page_header")
your first selector looking h3's children of page_header. 1 in same , need use id make change.
Comments
Post a Comment