问题描述:

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.

相关阅读:
Top