_动力学知识库

问题描述:

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.