javascript - 使用 JavaScript 更改当前主机的链接

Question

回答

@Jay-Blanchard 针对这个问题提出了一个绝妙的解决方案。我更进一步，合并了位置检查和添加类。

$(document).ready(function () {
    var url = window.location.href;
    var page = url.substring(url.lastIndexOf('/') + 1);
    var pathArray = window.location.href.split('/');
    var protocol = pathArray[0];
    var host = pathArray[2];
    var totalURL = protocol + '://' + host;

    $(".Nav-Links li [href]").each(function () {
        var linkURL = $(this).attr('href');
        var pageURL = linkURL.substring(linkURL.lastIndexOf('/') + 1);
        var newURL = protocol + '//' + host + '/' + pageURL;
        $(this).attr('href', newURL);
    });

    $("ul li [href]").each(function() {
    if (this.href == window.location.href) {
        $(this).addClass("active");
        }
    });
});

请注意，这绝对需要 jQuery。

谢谢杰伊!

问题

我有一个非常可靠的方法来构建一个简单的菜单，如果它是当前页面，则突出显示链接，但现在我正在使用 SharePoint，并且我只能在编辑模式下呈现未发布的设计。基本上，URL 更改为 http://www.primary-edit.example.com/而不是 http://www.example.com/。

我想要做的就是收集当前的 URL，将其分解为基本 URL，然后将其添加到菜单链接的开头。这样它将在编辑模式下显示 http://www.primary-edit.example.com/link.html ，在发布后显示 http://www.example.com/link.html ，并正确突出显示当前页面链接。

过去我用过这个:

<ul class="Nav-Links">
    <li><a href="http://www.example.com/index.html">Link 1</a></li>
    <li><a href="http://www.example.com/second.html">Link 2</a></li>
    <li><a href="http://www.example.com/third.html">Link 3</a></li>
</ul>

$(document).ready(function() {
    $(".Nav-Links li [href]").each(function() { 
    if (this.href == window.location.href) {
        $(this).addClass("active");
        }
    });
});

这在过去非常有效，但 SharePoint 并不公平。

这是我到目前为止所想到的。

//Break up the URL into usable pieces

var url = window.location.href;
var page = url.substring(url.lastIndexOf('/') + 1);
var pathArray = window.location.href.split( '/' );
var protocol = pathArray[0];
var host = pathArray[2];
var totalURL = protocol + '://' + host;

//Umm... somehow add "host" to each link in .Nav-Links

//Check the .Nav-Links href for matching links, then add .active to matching link

$(document).ready(function() {
    $(".Nav-Links li [href]").each(function() { 
    if (this.href == window.location.href) {
        $(this).addClass("active");
        }
    });
});

这已经完成了对 URL 的分解工作。问题是，我不知道如何将“host”变量添加到当前链接 href 的开头。您能提供的任何帮助都将非常棒。

谢谢

Answer 1

如果您必须更换它们，那么您可以这样做 -

$(".Nav-Links li [href]").each(function () {
   var linkURL = $(this).attr('href');
   var pageURL = linkURL.substring(linkURL.lastIndexOf('/') + 1);
   var newURL = protocol + '://' + host + '/' + pageURL; // uses your previously established variables
   $(this).attr('href', newURL);
});

http://jsfiddle.net/jayblanchard/umabA/确保使用 DOM 浏览器检查标记。

请记住，此操作假设您的网站和文件以某种方式定位在目录中。如果您希望用户下载并安装某些内容，您还需要考虑@BillyJ 的评论。