List item bold maken na klik

Status
Niet open voor verdere reacties.
G

guidogast

Gebruiker
Lid geworden
9 apr 2008
Berichten
52
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
 
Laatst bewerkt:
Zoiets zou kunnen.

HTML: 
<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>
 
Supersnail zei:
Zoiets zou kunnen.

HTML: 
<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>
Klik om te vergroten...
Thanks!! Ik ga het morgen even uitproberen.
 
Als je nested <li>'s gebruikt, is dit misschien iets voor je ;)

HTML: 
<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>
 
Robin S zei:
Als je nested <li>'s gebruikt, is dit misschien iets voor je ;)

HTML: 
<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>
Klik om te vergroten...

Helemaal top! Deze had ik nodig. Hartstikke bedankt!!
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan