在引導分頁中設置和取消活動類

Question

我有一些Javascript可以處理我的導航欄上的點擊。 在大多數情況下，它都適用於禁用樣式，該樣式應為上一個下一個，第一個和最后一個按鈕，這些按鈕會將您帶到正確的頁面。 由於某些原因，應用於活動樣式的相同技術無法正常工作。 理想情況下，除了當前頁面按鈕之外，我永遠不要讓任何按鈕顯示為活動狀態。 無論我單擊哪個按鈕都將顯示為活動樣式，除非單擊該頁面，否則當前頁面不會獲得活動樣式。 任何有關在我的導航欄按鈕上設置和取消激活的正確語法的幫助都將受到贊賞。

var current_page;
var total_pages;

function fnPage_click(multiplyer) {
    //make all buttons inactive and enabled
    for (var i = 0; i < total_pages; i++)
        $('#li' + i).removeClass("active");

    $('#li.prev').removeClass("active");
    $('#li.prev').removeClass("disabled");
    $('#li.next').removeClass("active");
    $('#li.next').removeClass("disabled");
    $('#li.first').removeClass("active");
    $('#li.last').removeClass("active");

    $.ajax({
        url: '/Home/Browsing?' + multiplyer,
        type: 'POST',
        error: function (xhr) {
            alert('Error: ' + xhr.statusText);
        },
        success: function (result) {
            $("#divLocGrid").html(result);
            current_page = multiplyer;
            switch (current_page) {
                case 1: {
                    //Previous is disabled/inactive, First is inactive, the current_page is active
                    $("#li.prev").removeClass("active").addClass("disabled");
                    $("li.first").removeClass("active");
                    $('#li' + current_page).addClass("active");
                    break;
                }
                case total_pages: {
                    //Next is disabled/inactive, Last is inactive, the current_page is active
                    $('#li.next').removeClass("active").addClass("disabled");
                    $("li.last").removeClass("active");
                    $('#li' + current_page).addClass("active");
                    break;
                }
                default: {
                    //Previous and Next are enabled but inactive the current_page is active
                    $('#li.prev').removeClass("active");
                    $('#li.next').removeClass("active");
                    $('li' + current_page).addClass("active");
                    break;
                }
            }
        },
        async: true,
        processData: false
    });
}

function fnPrevNxt(strDir) {
    var multiplyer;

    if (strDir == 'Nxt') {
        multiplyer = current_page + 1;
        if (multiplyer > total_pages) {
            $('#li.next').removeClass("active").addClass("disabled");
            return;
        }

    }
    else {
        multiplyer = current_page - 1;
        if (multiplyer < 1) {
            $('#li.prev').removeClass("active").addClass("disabled");
            return;
        }
    }

    fnPage_click(multiplyer);
}

function fnOnNavBtnsLoad(model) {
    total_pages = model;
    fnPage_click(1);
}

<body onload="fnOnNavBtnsLoad(@Model)">
<div id="dvNavBtns">
    <nav class="navbar navbar-expand-lg bg-gray-light navbar-dark" aria-label="Locations pages">
        <ul id="ulNavBtns" class="pagination">
            <li id="li.first" class="page-item">
                <a href="javascript:void(0)" id="btnFirst" class="page-link" onclick="fnPage_click(1)">First</a>
            </li>
            <li id="li.prev" class="page-item">
                <a href="javascript:void(0)" id="btnPrev" aria-label="<<" class="page-link" onclick="fnPrevNxt('Prev')">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            @{int pages = Model;
                int num = 0;
                while (num < pages)
                {
                    num++;
                    <li id="li" +@(num) class="page-item">
                        <a href="javascript:void(0)" aria-label=@num class="page-link" onclick="fnPage_click(@(num))">
                            @(num)
                        </a>
                    </li>
                }
            }
            <li id="li.next" class="page-item">
                <a href="javascript:void(0)" id="btnNxt" aria-label=">>" class="page-link" onclick="fnPrevNxt('Nxt')">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
            <li id="li.last" class="page-item">
                <a href="javascript:void(0)" id="btnLast" class="page-link" onclick="fnPage_click(@Model)">Last</a>
            </li>
        </ul>
    </nav>
</div>

Answer 1

它有點令人費解，但這是最終對我有用的語法。 我必須遍歷元素的document.context.all來找到該元素，然后從該元素的classList集合中添加或刪除。

$(document).context.all['li.id'].classList.add("classname");
$(document).context.all['li.id'].classList.remove("classname");

在引導分頁中設置和取消活動類

問題描述

1 個解決方案

解決方案1
0 已采納 2018-07-12 16:04:28

在引導分頁中設置和取消活動類

問題描述

1 個解決方案

解決方案1 0 已采納 2018-07-12 16:04:28

解決方案1
0 已采納 2018-07-12 16:04:28