simpele loop door buttons om id te veranderen
ik heb een menu :
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<ul class="drop_menu">
<li><a href="#" id="active" class="openLink">Button 1</a></li>
<li><a href="#">Button 2</a><ul class="submenu">
<li><a href="#" class="openMenu">Subbutton 1</a></li>
<li><a href="#" class="openMenu">Subbutton 2</a></li>
</ul></li>
<li><a href="#" class="openLink">Button 3</a></li>
<li><a href="#" class="openLink">Button 4</a></li>
</ul>
<li><a href="#" id="active" class="openLink">Button 1</a></li>
<li><a href="#">Button 2</a><ul class="submenu">
<li><a href="#" class="openMenu">Subbutton 1</a></li>
<li><a href="#" class="openMenu">Subbutton 2</a></li>
</ul></li>
<li><a href="#" class="openLink">Button 3</a></li>
<li><a href="#" class="openLink">Button 4</a></li>
</ul>
Nou wil ik dit afhandelen met jquery:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$('body').on('click', '.openMenu', function (event){
event.preventDefault();
$('html, body').animate({scrollTop: '0px'}, 500);
var tMenu = $(this).attr('href');
$( '#menukaart').load('menu/' + tMenu );
$('#menukaart').show(1000);
});
$('body').on('click', '.openLink', function (event){
event.preventDefault();
var tButton = $(this);
tPage = tButton.attr('href');
//Loop hier
tButton.attr("id","active");
$( '#section').load('pages/' + tPage );
$('html, body').animate({scrollTop: '0px'}, 500);
});
event.preventDefault();
$('html, body').animate({scrollTop: '0px'}, 500);
var tMenu = $(this).attr('href');
$( '#menukaart').load('menu/' + tMenu );
$('#menukaart').show(1000);
});
$('body').on('click', '.openLink', function (event){
event.preventDefault();
var tButton = $(this);
tPage = tButton.attr('href');
//Loop hier
tButton.attr("id","active");
$( '#section').load('pages/' + tPage );
$('html, body').animate({scrollTop: '0px'}, 500);
});
Zoals je hierboven al ziet, veranderd de knop waar ik op klik (van .openLink) het ID naar active.
Maar dan heb ik straks dus alle knoppen op active staan.
Ik zou graag door de .sub_menu willen loopen en van alle A objecten het ID leeg maken.
En daarna pas mijn huidige knop op active zetten
Ik denk dat dit niet bepaald zo netjes is:
Code (php)
1
2
3
4
5
2
3
4
5
$('.drop_menu').children('li').each(function () {
$(this).children('a').each(function () {
$(this).attr("id","");
});
});
$(this).children('a').each(function () {
$(this).attr("id","");
});
});
Heeft er iemand een quick-fix voor me ?
Gewijzigd op 13/09/2015 16:05:29 door Dennis WhoCares
Quote:
The id selector uses the id attribute of an HTML element to select a specific element. An id should be unique within a page, so the id selector is used if you want to select a single, unique element. To select an element with a specific id, write a hash character, followed by the id of the element.
Dus ik weet niet wat je allemaal aan het doen ben, maar ik ga geen brakke "quick fix" voor je schrijven tenzij je bereid ben deze opstelling te veranderen zoals dat normaal gaat, gewoon via classes. Ik ben bang dat je het concept van id's en classes precies hebt omgedraaid.
In jquery heb je mooie functies die dat kunnen doen:
https://api.jquery.com/category/manipulation/class-attribute/
Gewijzigd op 13/09/2015 16:51:36 door Johan K
inderdaad "An id should be unique within a page"
Zal een paar dingen omdraaien, drop_menu en sub_menu horen id te zijn
Hierbij schiet me iets anders te binnen:
Code (php)
1
$('#active').attr("id","");
doet ook wat ik wil :D
Gewijzigd op 13/09/2015 17:19:53 door Dennis WhoCares