0

小さな画面用のjqueryドロップダウンメニューがあります。そのために次のコードを使用します。

  $("<select />").appendTo("nav");
     // Create default option "Go to..."
     $("<option />", {
         "selected": "selected",
         "value": "",
         "text": "Go to..."
     }).appendTo("nav select");
     // Populate dropdown with menu items
     $("nav a").each(function () {
         var el = $(this);
         $("<option />", {
             "value": el.attr("href"),
             "text": el.text()
         }).appendTo("nav select");
     });
     $("nav select").change(function () {
         window.location = $(this).find("option:selected").val();
     });

私の問題は、メニュー項目が別のページに移動したときに、そのときに選択されたメニューが常に最初のリスト項目になることです。たとえば、ドロップダウン リストから連絡先ページを選択すると、連絡先ページに移動し、選択したドロップダウン アイテムが「Goto」として表示されます。どうすればこの問題を解決できますか。

4

2 に答える 2

0

js

$(document).ready(function () {
    loc = $(location).attr('href');
    var n = loc.split("/");
    var n1 = loc.split("/").length;
    var on_page = n[n1 - 1];
    var new_page = on_page.split("?");
    $('nav ul a').each(function () {
        if ($(this).attr('href') == new_page[0]) {
            $(this).find('li').addClass('active');
        }
    });
});

CSS

.active {
    background:#ffca00;
    color:#2e2f34;
    padding:16px 12px;
}

href で # を使用している場合の別のコード

js

$(document).ready(function () {
    $('nav ul li').click(function () {
        $(this).parent().parent().find('.active').removeClass('active');
        $(this).addClass('active');
    });
});

ワーキングデモhttp://jsfiddle.net/XEy4s/

于 2013-07-22T05:06:32.377 に答える
0

これを試してください（.each()ループの後に配置してください）：

$("nav select").val(window.location.href);

上記は問題なく機能するはずですが、別の方法を次に示します。

var currentPage = window.location.href;
$("<select />").appendTo("nav");

// Create default option "Go to..."
$("<option />", {
    "selected": "selected",
        "value": "",
        "text": "Go to..."
}).appendTo("nav select");

// Populate dropdown with menu items
$("nav a").each(function (i, elem) {
    var el = $(this);
    var href = el.attr("href");
    $("<option />", {
        "value": href,
            "text": el.text()
    }).appendTo("nav select");

    if(href == currentPage) {
        currentPage = i+1; // +1 because of additional 'Go to' option
    }
});

// Set selected index to current page
$("nav select")[0].selectedIndex = currentPage;

$("nav select").change(function () {
    window.location = $(this).find("option:selected").val();
});
于 2013-07-22T05:06:42.880 に答える