通过导航激活选项卡答案

【问题标题】：Activation of the tabs through navigation通过导航激活选项卡
【发布时间】：2017-06-19 09:21:40
【问题描述】：

我把代码写成

<div class="tslcNav" role="navigation">
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="index.html">Home</a></li>
                <li><a href="mngPost.html">Manage Portfolio</a></li>
                <li><a href="riskAssesment.html">Risk Assessment</a></li>
                <li><a href="security_setup.html">Security Setup</a></li>
                <li><a href="dataOwner-riskAssessmentCompliance.html"style="visibility: hidden"></a></li>
            </ul>
        </div>
    </div>

还有

<script type="text/javascript">
    $(function() {
        var pgurl = window.location.href.substr(window.location.href
                .lastIndexOf("/") + 1);
        $(".tslcNav ul li a").each(
                function() {
                    if(pgurl=="dataOwner-riskAssessmentCompliance.html")
                        $("riskAssesment.html").addClass("active");
                    if ($(this).attr("href") == pgurl
                            || $(this).attr("href") == '')
                        $(this).closest('li').addClass("active");
                })          
    });

但是，当我在 dataOwner-riskAssessmentCompliance.html 页面上时，它没有激活标签。当我在 dataOwner-riskAssessmentCompliance.html 页面上时，它应该激活标签 riskAssesment.html。这段代码有什么问题？

【问题讨论】：

标签： jquery html tabs navigation

【解决方案1】：

您使用了错误的选择器，您应该使用带有页面名称的href，

if(pgurl=="dataOwner-riskAssessmentCompliance.html")
    $("[href='riskAssesment.html']").addClass("active");

我认为您想将 active 类添加到其父级 li，

$(function() {
    var pgurl = window.location.href.substr(window.location.href
            .lastIndexOf("/") + 1);
    $(".tslcNav ul li a").each(function() {
        if(pgurl=="dataOwner-riskAssessmentCompliance.html"){
            $("[href='riskAssesment.html']").addClass("active")
                                            .closest('li').addClass('active');
        }
        else {
            if ($(this).attr("href") == pgurl || $(this).attr('href') == '')
                $(this).closest('li') // get the closest li
                       .addClass("active"); // add active class to that li
        }
    });
});

【讨论】：

我们可以使用任何其他方法而不是最接近（li）吗？因为如果我使用 URL 直接登陆任何页面，那么它不会显示该活动选项卡，否则它会显示。（意味着如果我运行项目它会显示，但如果我输入 URL，那么它不会显示活动选项卡）
我的答案中的代码仅在您的页面刷新时才有效。如果您想让锚点处于活动状态，则对该事件使用相同的逻辑。

【解决方案2】：

为了添加类，您需要使用href as 访问选择器

$("[href='riskAssesment.html']").addClass("active");

【讨论】：

【解决方案3】：

  $(document).ready(function () {
            var url = window.location.toString().split('?');

            $('ul.nav li a').filter(function () {
                if (this.href != '') {
                    if (this.href == url[0]) {
                        $(this).parent().addClass('active');
                    }
                }
            });
        });

希望对你有帮助。

【讨论】：

【解决方案4】：

你需要这个

var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
$('ul.nav > li').removeClass("active");
$("a[href='"+pgurl+"']").parent().addClass("active");

【讨论】：