-2

このチュートリアルのように、ul li と Jquery を使用してドロップダウン メニューを作成しようとしています。

テスト HTML コードは次のとおりです。

<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>OS</span>
<ul class="dropdown">
    <li><a href="http://www.ubuntu.com/"><i class="icon-envelope icon-large"></i>Ubuntu</a></li>
    <li><a href="http://www.microsoft.com/"><i class="icon-truck icon-large"></i>Microsoft</a></li>
    <li><a href="http://www.apple.com/ch/"><i class="icon-plane icon-large"></i>Apple</a></li>
</ul>

「Apple」をクリックすると Apple サイトにリダイレクトされ、Microsoft と同じように Microsoft にリダイレクトされます。ただし、現時点では、これらのいずれかをクリックすると、常に ubuntu Web サイトにリダイレクトされます。

Js fiddleで Javascript を使用したコード全体を次に示します。

助けてくれてありがとう。

4

1 に答える 1

0

あなたの質問は少し混乱していますが、私が収集できるのは、あなたが同じページにリンクしている要素がほとんどないということですか?

li はデフォルトのハイパーリンクではないため、これを実現するために JS/JQuery を使用していると思います。リンクしたチュートリアルでは、ナビゲーションとアンカーを使用しています。

これは、あなたのニーズに合った動作する li メニューシステムの例です。

      $(function(){ // Wait till page is loaded

        $(".menulink").click(function(){ // do something on click of one of the menu items.
            window.location.replace($(this).data("link")); //get the data link and redirect to it
        });

    });

使用できる HTML リストは次のとおりです。data 属性は、URL を格納するために使用されます

    <ul>
    <li class="menulink" data-link="www.example.com">Menu1</li>
    <li class="menulink" data-link="www.example.com">Menu2</li>
    <li class="menulink" data-link="www.example.com">Menu3</li>
    </ul>

アップデート：

あなたのフィドルを見た後、私はそれを機能させることができました

http://jsfiddle.net/xyUP3/14/

問題は単にタイプoだったと思います。クリックしたばかりのローカル li インスタンスである「opt」を参照する必要があるときに、グローバル li オブジェクトである「opts」を参照していました。したがって、ubuntuリンクであるページの最初のliに常にハイパーリンクされていました

于 2013-06-03T13:29:06.820 に答える