Forum PHP.pl > [JavaScript] Dodanie opcji drop down

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript] Dodanie opcji drop down

Popeye

11.08.2009, 21:28:40

Witam chciałbym dodać w divie o id result standardowe pole np. "{wars:navlist}", a gdy kliknę w rozsuwanym menu na daną pozycję zmieniało treść diva na wybraną - ta opcja działa. I co można zrobić żeby ukryć adres linka typu "#", ablo co zrobić żeby po kliknięciu nie przenosiło na górę strony.

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".dropdown dt a").click(function() {
                $(".dropdown dd ul").toggle();
            });
 
            $(".dropdown dd ul li a").click(function() {
                var text = $(this).html();
                $(".dropdown dt a span").html(text);
                $(".dropdown dd ul").hide();
                $("#result").html(getSelectedValue("sample"));
            });
 
            function getSelectedValue(id) {
                return $("#" + id).find("dt a span.value").html();
            }
 
            $(document).bind('click', function(e) {
                var $clicked = $(e.target);
                if (! $clicked.parents().hasClass("dropdown"))
                    $(".dropdown dd ul").hide();
            });
 
        });
    </script>
</head>
<body>
 
 
    <dl id="sample" class="dropdown">
        <dt><a href="#"><span>Games</span></a></dt>
        <dd>
            <ul>
                <li><a href="#">CoD 4<span class="value">{wars:navlist1}</span></a></li>
                <li><a href="#">CS 1.6<span class="value">{wars:navlist2}</span></a></li>
                <li><a href="#">FIFA<span class="value">{wars:navlist3}</span></a></li>
                <li><a href="#">TM<span class="value">{wars:navlist4}</span></a></li>
            </ul>
        </dd>
    </dl>
    <div id="result"></div>
</body>
</html>
[HTML] pobierz, plaintext

erix

11.08.2009, 22:25:08

Cytat

I co można zrobić żeby ukryć adres linka typu "#", ablo co zrobić żeby po kliknięciu nie przenosiło na górę strony.

Zwracaj w funkcji false albo wykonuj metodę preventDefault wewnątrz zdarzenia.

Popeye

12.08.2009, 09:55:49

Jak byś mógł mi napisać jeszcze co zmienić

erix

12.08.2009, 10:30:30

A googlałeś to, o czym napisałem?

Popeye

12.08.2009, 13:53:35

Tak, ale jak to dodać to nie mam pojęcia. Używam gotowych skryptów.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.