I have a menu, with some submenu items, and I would like when I select some submenu item, change the main label of the system. For example, for item 1 of menu 1 would change label to 'System A', for item 1 of menu 2 would change label to 'System B'.
Here´s the code, but doesn´t work well..
$(document).ready(function() {$('#choiceA ul li ul li a').click(function() {
// change label to System A
$('#labelSystem').html('System A');
});
$('#choiceB ul li ul li a').click(function() {
// change label to System B
$('#labelSystem').html('System B');
});
});
<table cellspacing="0" cellpadding="0" border="0" width="100%"><tr>
<td>
<span class="htitulo">System - <div id="labelSystem"></div></span>
</td>
</tr>
</table>
<div id="menu">
<ul>
<li id="choiceA"><a href="#">Menu1</a>
<ul>
<li><a href="#">Submenu 1</a>
</li>
<li><a href="#">Submenu 2</a>
</li>
</ul>
</li>
<li id="choiceB"><a href="#">Menu2</a>
<ul>
<li><a href="">Submenu 1</a>
<ul>
<li><a id="option1" href="">Submenu 1-1</a>
</li>
<li><a id="option2" href="">Submenu 1-2</a>
</li>
</ul>
</li>
<li><a href="#">Submenu 2</a>
<ul>
<li><a id="option3" href="">Submenu 2-1</a>
</li>
<li><a id="option4" href="">Submenu 2-2</a>
</li>
<li><a id="option5" href="">Submenu 2-3</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Working with the example given by OP, here is what I would do :
$(document).ready(function() {
$('#choiceA li:first-child a').click(function() {
// change label to System A
$('#labelSystem').text('System A');
});
$('#choiceB li:first-child a').click(function() {
// change label to System B
$('#labelSystem').text('System B');
});
});
Here is the updated fiddle.