修改

Question

我使用window.location.href来获取插入jquery的url路径。

它工作正常，但现在我需要抓住一条不同的路径，但我不知道该怎么做。

在我需要获取此网址user.html并插入活动类

之前

这样做：

$(document).ready(function(){
    var loc = window.location.href; // returns the full URL

    if(/user/.test(loc)) {
        $('ul.nav.nav-tabs li').addClass('active');

    }
});

现在我需要得到这个：user.html#/details

如何使用以下代码获取此网址：user.html#/details？

$(document).ready(function(){
    var loc = window.location.href; // returns the full URL

    if(/user/.test(loc)) {
        $('ul.nav.nav-tabs li').addClass('active');

    }
});

Answer 1

您只需要为网址的详细信息变体编写正则表达式。

/user\.html#\/details/

如果您正在检查与if else的匹配，或者case语句确保您首先放置最具体的测试。

修改

我会稍微修改一下以获得不同的路线。

使用具有散列键和回调的对象，您可以创建一个不依赖于正则表达式的简单路由器。

不幸的是，该示例将不再有效，但它将在生产中发挥作用。

＆＃13;

function router(loc) {
  return function(e) {
    var href = loc.href;
  
    var routes = {
      '/details': function() { console.log('details route') },
      '/contact': function() { console.log('contact route') },
      '/email': function() { console.log('email route') },
      'default': function() { console.log('no hash set') }
    }
  
    if (/user\.html/.test(loc.href)) {
      if (typeof routes[loc.hash] === 'function') {
        return routes[loc.hash]()
      }
      return routes['default']()
    }
  }
}

var mockLocation = {
  hash: '/contact',
  href: 'user.html#/contact'
}

// bind the router to page load and hash change.
// change mockLocation to window.location for production
$(document).on('ready', router(mockLocation))
$(window).on('hashchange', router(mockLocation))

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 2

window.location.href应该继续得到你想要的东西。

如果您想了解某些内容的工作原理，只需将其输入控制台即可查看其中包含的内容。例如，我刚刚将#/splurge添加到此页面的路径中，将window.location输入控制台并获取此信息：

Answer 3

您可以使用以下代码实现哈希检查：

$( document ).ready(
    function () {
        // Get the current URL
        var loc = window.location.href;
        // Get the hash part
        var hash = window.location.hash.replace( '#', '' );

        if ( 
            // If the location contains the word user
            /user/.test( loc ) &&
            // and the hash string has length greater than 0
            0 < hash.length &&
            // and the hash contains the string /details
            /\/details/.test( hash )
        ) {
            // Do stuff related to user page
            // with the details hash part
        }
    }
);

此外，如果您想使其更复杂，您可以使用以下代码：

(function( $, window, undefined ) {

    // Handle the page elements related to the hash parts
    var track_hash_changes = function track_hash_changes() {
        // Get the current URL
        var loc = window.location.href;
        // Get the hash part
        var hash = window.location.hash.replace( '#', '' );

        if ( 
            // If the location contains the word user
            /user/.test( loc )
        ) {
            switch( hash ) {
                case '/case-1':
                    // Do stuff for case #1
                    break;
                case '/case-2':
                    // Do stuff for case #2
                    break;
                case '/case-X':
                    // Do stuff for case #X
                    break;
            }
        }
    };

    $( document ).ready(
        function () {
            // Listen for changes in the Hash part of the URL
            window.addEventListener("hashchange", track_hash_changes, false);
        }
    );
})( jQuery, this );

其中case-1，case-2，case-X是user.html#/case-1，user.html#/case-2，user.html#/case-X

window.location.href与.html之后的#hash

3 个答案:

修改