当 URL 包含特定字符串时，如何向元素添加/删除类？ [复制]

Question

我有一些标签：

<!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" id="hometab" class="active"><a href="http://www.mypage.com/" >Home</a></li>
    <li role="presentation" id="contenttab"><a href="#content" aria-controls="content" role="tab" data-toggle="tab">content</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">home</div>
    <div role="tabpanel" class="tab-pane" id="content">content</div>
  </div>

当我的 URL 包含字符串 ?dir 时，我想向选项卡添加一个类。

例如：如果我的 URL 是 www.mypage.com/?dir=something，那么 #contenttab 应该是活动的。例如，如果 URL 仅为 www.mypage.com，则 #contenttab 不应处于活动状态，但 #hometab 应处于活动状态。

    <script type="text/javascript">
$(document).ready(function() {
    var url = location.pathname;
    if ("url:contains('?dir')") {
        $("#contenttab").attr("class","active");
        $("#hometab").removeClass("active");

    } else {
    $("#contenttab").removeClass("active");
    $("#hometab").attr("class","active");
    }

});        
</script>

我的脚本不工作。 #contenttab 始终处于活动状态，#hometab 从不处于活动状态。

Answer 1

尝试用这个检查：

if ( url.indexOf( '?dir' ) !== -1 ) { ... }

或者试试：

var url = location.search; // or location.href;

if ( url.indexOf( '?dir' ) !== -1 ) { ... }

Answer 2

    var url = location.pathname;

    if (url.indexOf('?dir') > -1) {
        $("#contenttab").attr("class", "active");
        $("#hometab").removeClass("active");

    } else {
        $("#contenttab").removeClass("active");
        $("#hometab").attr("class", "active");
    }

Answer 3

尝试使用测试：

<script type="text/javascript">
        $(document).ready(function() {
            if (/\?dir/.test(location.pathname)){
                $("#contenttab").attr("class","active");
                $("#hometab").removeClass("active");
            } else {
                $("#contenttab").removeClass("active");
                $("#hometab").attr("class","active");
            }
        });        
</script>

感谢回答How can I get query string values in JavaScript?我认为做你需要的最好和安全的方法是获取查询字符串参数dir。当然，函数 getParameterByName() 将返回对获取任何其他查询字符串参数有用。

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
    results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

var dir=getParameterByName('dir');

$(document).ready(function() {
    if (dir==''){
        $("#contenttab").attr("class","active");
        $("#hometab").removeClass("active");
    } else {
        $("#contenttab").removeClass("active");
        $("#hometab").attr("class","active");
    }
});   

注意：如果一个参数出现多次 (?dir=lorem&dir=ipsum)，你会得到第一个值（lorem）。