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

Using JavaScript to alter links to current host

本文关键字：主机 链接 JavaScript 使用      更新时间：2023-09-26

答案

@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的开头。你能提供的任何帮助都将是非常棒的。

感谢

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

$(".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的评论。

如果您使用相对链接，应该可以解决您的问题。因此，不要href="http://www.example.com/index.html"你只需要使用href="/index.html"这是一种更好的做法，因为它可以很容易地从开发环境转移到实时网站。此外，如果有人禁用了JavaScript，而你使用了你建议的方法，那么他们的所有链接都会将他们指向开发网站。

相关文章：