Question

ANSWER

@ 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。

谢谢Jay！

问题

我有一个非常可靠的方法来构建一个简单的菜单，如果它是当前页面，则突出显示链接，但现在我正在使用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

如果您使用可以解决问题的相对链接。因此，不要使用href =“http://www.example.com/index.html”，而是使用href =“/ index.html”这是更好的做法，因为它可以轻松地从开发环境转移到实时站点。此外，如果某人禁用了JavaScript并且您使用了您建议的方法，那么他们所有的链接都会指向开发网站。

Answer 2

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

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

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

2 个答案: