List item bold maken na klik

**guidogast** · 4 juni 2012, 10:03

Hoi,

Samen met een aantal klasgenoten ben ik bezig met een groot webapplicatie project. Nu zit ik met een probleem.
We gebruiken een <ul> met daarin <li>. Logisch uiteraard. Die list items worden dynamisch ingeladen. Nu kom ik er maar niet uit. Als de gebruiker op een list item klikt. Wil ik dat dat list item bold wordt, zodat de gebruiker weet waar hij is. Als de gebruiker dan weer op een andere list item klikt, moet de vette list item weer normaal worden en degene die is aangeklikt vet worden...

Weet één van jullie misschien hoe dit kan. Ik heb google al gehad en een aantal dingen geprobeerd, maar niks werkt tot nu toe. Alle suggesties zijn welkom!

Bedankt!

Guido

**Supersnail** · 4 juni 2012, 15:39

Zoiets zou kunnen.

HTML Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<script type="text/javascript">
function bold(item)
{
    for (var i=1;i<=4;i++)
    {
        document.getElementById('item' + i).style.fontWeight='normal';
    }
    item.style.fontWeight='bold';
}
</script>
</head>
<body>
<ul>
<li id="item1" onClick="bold(this)">item 1</li>
<li id="item2" onClick="bold(this)">item 2</li>
<li id="item3" onClick="bold(this)">item 3</li>
<li id="item4" onClick="bold(this)">item 4</li>
</ul>
</body>
</html>

**guidogast** · 4 juni 2012, 21:47

Origineel gepost door Supersnail

Zoiets zou kunnen.

HTML Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<script type="text/javascript">
function bold(item)
{
    for (var i=1;i<=4;i++)
    {
        document.getElementById('item' + i).style.fontWeight='normal';
    }
    item.style.fontWeight='bold';
}
</script>
</head>
<body>
<ul>
<li id="item1" onClick="bold(this)">item 1</li>
<li id="item2" onClick="bold(this)">item 2</li>
<li id="item3" onClick="bold(this)">item 3</li>
<li id="item4" onClick="bold(this)">item 4</li>
</ul>
</body>
</html>

Thanks!! Ik ga het morgen even uitproberen.

**Robin S** · 5 juni 2012, 14:18

Als je nested <li>'s gebruikt, is dit misschien iets voor je

HTML Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<html>
    <head>
        <script type="text/javascript">
 
            function addEvent(el, type, callback, useCapture) {
                if (el.addEventListener) {
                    el.addEventListener(type, callback, useCapture);
                }
                else if (el.attachEvent) {
                    el.attachEvent("on" + type, callback);
                }
                else {
                    console.error("No addEvent alternative");
                }
            }
 
            function nestedBolding(ul) {
 
                var boldList = [], liList = ul.getElementsByTagName("li");
 
                function bold(el) {
                    el.className += " bold";
                    boldList.push(el);
                }
                function unboldAll() {
                    var el;
                    while((el = boldList.pop())) {
                        el.className = el.className.replace(/\s*bold\b/, "");
                    }
                }
 
                function onClick(el) {
                    unboldAll();
                    while (el != ul) {
                        if (el.tagName == "LI") {
                            bold(el);
                        }
                        el = el.parentNode;
                    }
                }
 
                for (var i = 0; i < liList.length; i++) {
                    addEvent(liList[i], "click", function(e) {
                        if (this == e.target) {
                            onClick(this);
                        }
                    }, false);
                }
 
            }
            
            function main() {
                nestedBolding(document.getElementById("myUl"));
            }
            window.onload = main;
            
        </script>
        <style type="text/css">
 
            li {
                font-weight: normal;
            }
            .bold {
                font-weight: bold;
            }
 
        </style>
    </head>
    <body>
        <ul id="myUl">
            <li>item 1</li>
            <li>item 2
                <ul>
                    <li>Nested item 1</li>
                    <li>Nested item 2</li>
                    <li>Nested item 3</li>
                    <li>Nested item 4
                        <ul>
                            <li>Nested item 4.1</li>
                            <li>Nested item 4.2</li>
                            <li>Nested item 4.3</li>
                        </ul>
                    </li>
                    <li>Nested item 5</li>
                </ul>
            </li>
            <li>item 3</li>
            <li>item 4</li>
        </ul>
    </body>
</html>

**guidogast** · 6 juni 2012, 10:43

Origineel gepost door Robin S

Als je nested <li>'s gebruikt, is dit misschien iets voor je

HTML Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<html>
    <head>
        <script type="text/javascript">
 
            function addEvent(el, type, callback, useCapture) {
                if (el.addEventListener) {
                    el.addEventListener(type, callback, useCapture);
                }
                else if (el.attachEvent) {
                    el.attachEvent("on" + type, callback);
                }
                else {
                    console.error("No addEvent alternative");
                }
            }
 
            function nestedBolding(ul) {
 
                var boldList = [], liList = ul.getElementsByTagName("li");
 
                function bold(el) {
                    el.className += " bold";
                    boldList.push(el);
                }
                function unboldAll() {
                    var el;
                    while((el = boldList.pop())) {
                        el.className = el.className.replace(/\s*bold\b/, "");
                    }
                }
 
                function onClick(el) {
                    unboldAll();
                    while (el != ul) {
                        if (el.tagName == "LI") {
                            bold(el);
                        }
                        el = el.parentNode;
                    }
                }
 
                for (var i = 0; i < liList.length; i++) {
                    addEvent(liList[i], "click", function(e) {
                        if (this == e.target) {
                            onClick(this);
                        }
                    }, false);
                }
 
            }
            
            function main() {
                nestedBolding(document.getElementById("myUl"));
            }
            window.onload = main;
            
        </script>
        <style type="text/css">
 
            li {
                font-weight: normal;
            }
            .bold {
                font-weight: bold;
            }
 
        </style>
    </head>
    <body>
        <ul id="myUl">
            <li>item 1</li>
            <li>item 2
                <ul>
                    <li>Nested item 1</li>
                    <li>Nested item 2</li>
                    <li>Nested item 3</li>
                    <li>Nested item 4
                        <ul>
                            <li>Nested item 4.1</li>
                            <li>Nested item 4.2</li>
                            <li>Nested item 4.3</li>
                        </ul>
                    </li>
                    <li>Nested item 5</li>
                </ul>
            </li>
            <li>item 3</li>
            <li>item 4</li>
        </ul>
    </body>
</html>

Helemaal top! Deze had ik nodig. Hartstikke bedankt!!

Onderwerp: List item bold maken na klik

Onderwerp opties

Zoek in onderwerp

Vraag is opgelost

List item bold maken na klik

Berichtenregels

Helpmij.nl

Helpmij.nl en business

Contact