Fatal编程技术网
  • javascript/
  • Javascript 如何使当前页面的链接具有禁用的外观？

Javascript 如何使当前页面的链接具有禁用的外观？

javascript jquery css html

Javascript 如何使当前页面的链接具有禁用的外观？,javascript,jquery,css,html,nav,Javascript,Jquery,Css,Html,Nav,在我的网站中，我有三个页面：主页、关于和联系。我希望当前页面的链接提供一些视觉指示，即单击相应的链接将是毫无意义的，因为用户已经在该页面上了。CSS或jQuery是否能更好地处理此任务？在这两种情况下，哪种最优雅的解决方案也会自动应用于将来可能添加的任何页面 这是我的HTML diesbezueglich： <nav> <ul id="menu"> <li><a href="~/">Home</a></li

在我的网站中，我有三个页面：主页、关于和联系。我希望当前页面的链接提供一些视觉指示，即单击相应的链接将是毫无意义的，因为用户已经在该页面上了。CSS或jQuery是否能更好地处理此任务？在这两种情况下，哪种最优雅的解决方案也会自动应用于将来可能添加的任何页面

这是我的HTML diesbezueglich：

<nav>
    <ul id="menu">
        <li><a href="~/">Home</a></li>
        <li><a href="~/About">About</a></li>
        <li><a href="~/Contact">Contact</a></li>
    </ul>
</nav>
而相关的HTML是：

<nav>
    <ul id="menu">
        <li><a href="~/">Home</a></li>
        <li><a href="~/About">About</a></li>
        <li><a href="~/Contact">Contact</a></li>
    </ul>
</nav>
在_siteloayout.cshtml中：

<ul id="menu">
    <li id="home" name="home"><a href="~/">Home</a></li>
    <li><a href="~/About">About</a></li>
    <li><a href="~/Contact">Contact</a></li>
</ul>

<nav>
    <ul id="menu">
        <li id="home"><a href="~/">Home</a></li>
        <li id="about"><a href="~/About">About</a></li>
        <li id="contact"><a href="~/Contact">Contact</a></li>
    </ul>
</nav>

<nav>
    <ul id="menu">
        <li id="home"><a href="~/">Home</a></li>
        <li id="about"><a href="~/About">About</a></li>
        <li id="contact"><a href="~/Contact">Contact</a></li>
    </ul>
</nav>
其中currentPage是将颜色设置为蓝色的css类，每个导航链接都有一个位置id；我想我还必须为两个链接添加一个removeClass，每个if/else块的索引为-1

我的啤酒越来越咸了

更新3 我试过这个：

将ID添加到_siteloayout.cshtml中的元素：

<ul id="menu">
    <li id="home" name="home"><a href="~/">Home</a></li>
    <li><a href="~/About">About</a></li>
    <li><a href="~/Contact">Contact</a></li>
</ul>

<nav>
    <ul id="menu">
        <li id="home"><a href="~/">Home</a></li>
        <li id="about"><a href="~/About">About</a></li>
        <li id="contact"><a href="~/Contact">Contact</a></li>
    </ul>
</nav>

<nav>
    <ul id="menu">
        <li id="home"><a href="~/">Home</a></li>
        <li id="about"><a href="~/About">About</a></li>
        <li id="contact"><a href="~/Contact">Contact</a></li>
    </ul>
</nav>
…但它什么也没做-无论我在哪里导航，所有链接都是灰色的

更新4 我也试过了，但没有用：

if ($('#home').attr('href').indexOf('Home') != -1) $('#home').addClass('currentPage');
更新5 我想知道是否有办法使用_PageStart.cshtml来处理这个问题？瞧，我能做点什么吗

@{
    Layout = "~/_Layout.cshtml";
    //pseudocode follows
    var currentPage = CurrentPage.Id;
}

.current {
    color: blue;
}

.current a {
      text-decoration: none;
}
//然后一些jQuery也会出现伪代码：

if @currentPage == Default {
    #home.display = none;
else if @currentPage == About {
    #about.display = none;
else if @currentPage == Contact {
    #contact.display = none;
} // perhaps set them all visible from the git-go
更新6 jQuery for ASP.NET开发人员激发的另一种可能性是ready函数伪代码中的以下内容：；如果这能奏效，我欢迎我需要的具体jQuery来充实这一点：

// first set all of the nav ul li to their default color, right? (not shown)
// now, color the current one chartreuse:
$("nav ul li").each(function() {
    switch ($(this.name)) {
        case 'home':
            $(#home).css("color", "chartreuse");
            break;
        case 'about':
            $(#about).css("color", "chartreuse");
            break;
        case 'contact':
            $(#contact).css("color", "chartreuse");
            break;
    }
});
更新7 嗯，我相信这不是任何人的优雅想法，但我确实找到了一种方法，通过对每个li使用单击事件来实现它。优雅欢迎来到这里的JSFIDLE：

关于上述JSFIDLE的优雅化，必须有一种方法来做类似的事情：

jQuery(function () {
    $("nav ul li").css("color", "black");
    var currentLI = theOneClicked; //??? how to get this???
    $(currentLI).css("color", "blue");
});
更新8 它在JSFIDLE中工作，但在我的项目中不工作；在_siteloayout.cshtml中具有以下内容：

<ul id="menu">
    <li id="home" name="home"><a href="~/">Home</a></li>
    <li><a href="~/About">About</a></li>
    <li><a href="~/Contact">Contact</a></li>
</ul>

<nav>
    <ul id="menu">
        <li id="home"><a href="~/">Home</a></li>
        <li id="about"><a href="~/About">About</a></li>
        <li id="contact"><a href="~/Contact">Contact</a></li>
    </ul>
</nav>

<nav>
    <ul id="menu">
        <li id="home"><a href="~/">Home</a></li>
        <li id="about"><a href="~/About">About</a></li>
        <li id="contact"><a href="~/Contact">Contact</a></li>
    </ul>
</nav>
…不起作用。也不只是将第一个函数移动到Default.cshtml，因此它看起来如下所示：

$(document).ready(function () {
    $("#tabs").tabs();
    $(".fancybox").fancybox();
    $("#home").click(function (event) {
        $("#home").css("color", "blue");
        $("#about").css("color", "black");
        $("#contact").css("color", "black");
    });
});

$(document).ready(function() {
     $('a[href="' + window.location.pathname + '"]').addClass('current');
});
您可以使用一些服务器端语言（例如PHP）检查当前页面是否为Home、About或Contact，并相应地应用当前类。或者，如果您愿意，您可以使用JavaScript来实现这一点。我不确定您的绝对URL看起来如何，但我会这样做：

$(document).ready(function () {
    $("#tabs").tabs();
    $(".fancybox").fancybox();
    $("#home").click(function (event) {
        $("#home").css("color", "blue");
        $("#about").css("color", "black");
        $("#contact").css("color", "black");
    });
});

$(document).ready(function() {
     $('a[href="' + window.location.pathname + '"]').addClass('current');
});
根据URL的外观，您可能需要在其中添加一些前斜杠。

您可以使用一些服务器端语言（如PHP）检查当前页面是否为主页、关于或联系人，并相应地应用当前类。或者，如果您愿意，您可以使用JavaScript来实现这一点。我不确定您的绝对URL看起来如何，但我会这样做：

$(document).ready(function () {
    $("#tabs").tabs();
    $(".fancybox").fancybox();
    $("#home").click(function (event) {
        $("#home").css("color", "blue");
        $("#about").css("color", "black");
        $("#contact").css("color", "black");
    });
});

$(document).ready(function() {
     $('a[href="' + window.location.pathname + '"]').addClass('current');
});
根据URL的外观，您可能需要在其中添加一些前斜杠。

此通用开发任务有三组解决方案：1个服务器端脚本为您更改菜单/链接，2个CSS样式（使用类似当前类的内容），或3个javascript/CSS混合解决方案

这实际上完全取决于您的系统和开发范围。对于大型动态站点，如果已经在使用服务器端代码，显然也可以使用服务器端代码。但对于大多数尚未使用此类脚本的项目，可以手动将“当前”类添加到链接中，并根据您的链接/菜单样式，使用CSS或甚至更多的锚来设置链接样式

要获得更健壮的javascript解决方案，您可以尝试以下方法：

就可用性而言，人们普遍认为，只要将导航链接的样式设置为看起来不那么有趣、对比度较低、更灰、不带下划线等，就足以帮助人们了解它们的存在。点击一个你已经在的链接的成本很低，但是对于大多数网站来说，这是一个很好的设计风格。

这个通用开发任务有三套解决方案：1个服务器端脚本为你改变菜单/链接，2个CSS样式使用类似于当前类的东西，或者3个javascript/CSS混合解决方案

这实际上完全取决于您的系统和开发范围。对于大型动态站点，如果已经在使用服务器端代码，显然也可以使用服务器端代码。但对于大多数尚未使用此类脚本的项目，可以手动将“当前”类添加到链接中，并根据您的链接/菜单样式，使用CSS或甚至更多的锚来设置链接样式

要获得更健壮的javascript解决方案，您可以尝试以下方法：

就可用性而言，人们普遍认为，只要将导航链接的样式设置为看起来不那么有趣、对比度较低、更灰、不带下划线等，就足以帮助人们了解它们的存在。点击一个你已经在的链接的成本很低，但是对于大多数网站来说，这是一个很好的设计风格。

你必须为这个活动状态创建一个CSS类，就像评论中建议的那样，我在这个例子中使用current

.current {
text-decoration: none;
/* here you style the seemingly disabled link as you please */
}
至于HTML，活动菜单页面如下所示 :

如果您在“关于”页面中

   <nav>
        <ul id="menu">
            <li><a href="~/">Home</a></li>
            <li><a class="current" href="~/About">About</a></li>
            <li><a href="~/Contact">Contact</a></li>
        </ul>
    </nav>
如果您希望仅使用html禁用该链接，则代码如下。Fiddle已更新以显示此代码。下面的评论中提供了一个使用Javascript的优雅解决方案

<nav>
    <ul id="menu">
        <li><a href="~/">Home</a></li>
        <li><span class="current" >About</span></li>
        <li><a href="~/Contact">Contact</a></li>
    </ul>
</nav>
我在这里举了一个简单的例子，这样你就可以知道这是否是你想要的：

最好的祝愿

您必须为此活动状态创建一个CSS类，如注释中所建议的，我在本例中使用current

.current {
text-decoration: none;
/* here you style the seemingly disabled link as you please */
}
对于HTML，活动菜单页面如下所示：

$(document).ready(function () {
    $("#tabs").tabs();
    $(".fancybox").fancybox();
    $("#home").click(function (event) {
        $("#home").css("color", "blue");
        $("#about").css("color", "black");
        $("#contact").css("color", "black");
    });
});

$(document).ready(function() {
     $('a[href="' + window.location.pathname + '"]').addClass('current');
});
如果您在“关于”页面中

   <nav>
        <ul id="menu">
            <li><a href="~/">Home</a></li>
            <li><a class="current" href="~/About">About</a></li>
            <li><a href="~/Contact">Contact</a></li>
        </ul>
    </nav>
如果您希望仅使用html禁用该链接，则代码如下。Fiddle已更新以显示此代码。下面的评论中提供了一个使用Javascript的优雅解决方案

<nav>
    <ul id="menu">
        <li><a href="~/">Home</a></li>
        <li><span class="current" >About</span></li>
        <li><a href="~/Contact">Contact</a></li>
    </ul>
</nav>
我在这里举了一个简单的例子，这样你就可以知道这是否是你想要的：

最美好的祝愿

您的更新2应该可以运行，但您忘记了将$'home'。addClass

但是，如果它再次不起作用，请特别注意您的CSS

例如，如果您有一个css

#home{color : blue;}
.current{color : orange;}
文本将是蓝色的，因为home更强大

如果我们将值放入选择器： id=10 等级=5 节点选择器div=1

所以home=10并且高于。当前值等于5，homestyles将覆盖

您可以使用li.current，但同样，5+1=6比id低

但是home.current将等于15！威奇将超越家居风格

但是，如果您的颜色样式位于节点本身上，并且属性style=必须使用jquery或use将其删除！重要：

它将覆盖所有css，但不推荐使用。

您的更新2应该可以工作，但您忘记了放置$'home'。addClass

但是，如果它再次不起作用，请特别注意您的CSS

例如，如果您有一个css

#home{color : blue;}
.current{color : orange;}
文本将是蓝色的，因为home更强大

如果我们将值放入选择器： id=10 等级=5 节点选择器div=1

所以home=10并且高于。当前值等于5，homestyles将覆盖

您可以使用li.current，但同样，5+1=6比id低

但是home.current将等于15！威奇将超越家居风格

但是，如果您的颜色样式位于节点本身上，并且属性style=必须使用jquery或use将其删除！重要：

它将覆盖所有css，但不推荐使用。

要根据当前url以编程方式更改我的链接，我更喜欢jquery：

<style type="text/css">
.current {
   color: #cccccc;
}
</style>

...

<nav>
   <ul id="menu">
      <li><a href="~/">Home</a></li>
      <li><a href="~/About">About</a></li>
      <li><a href="~/Contact">Contact</a></li>
   </ul>
</nav>

...

<script type="text/javascript">
   $(document).ready(function() {
      var href = $("#menu li a").prop("href");
      $("a[href$='"+href.substr( href.lastIndexOf("/") )+"']").addClass("current");
   });
</script>
..jquery代码将当前类添加到其href属性设置为last/之后地址的最后一部分的任何a链接中。无论如何，如果您的链接有点像/Contact/More..

要根据当前url以编程方式更改我的链接，我更喜欢jquery：

<style type="text/css">
.current {
   color: #cccccc;
}
</style>

...

<nav>
   <ul id="menu">
      <li><a href="~/">Home</a></li>
      <li><a href="~/About">About</a></li>
      <li><a href="~/Contact">Contact</a></li>
   </ul>
</nav>

...

<script type="text/javascript">
   $(document).ready(function() {
      var href = $("#menu li a").prop("href");
      $("a[href$='"+href.substr( href.lastIndexOf("/") )+"']").addClass("current");
   });
</script>
..jquery代码将当前类添加到其href属性设置为last/之后地址的最后一部分的任何a链接中。无论如何，如果你的链接有点像/Contact/More..

你的Update 2版本即将运行，那么这并不完美-你只需要将类添加到home，而不是home

比如：

@{
    Layout = "~/_Layout.cshtml";
    //pseudocode follows
    var currentPage = CurrentPage.Id;
}

.current {
    color: blue;
}

.current a {
      text-decoration: none;
}
与：

您的更新2版本即将运行-您只需将该类添加到home，而不是home

比如：

@{
    Layout = "~/_Layout.cshtml";
    //pseudocode follows
    var currentPage = CurrentPage.Id;
}

.current {
    color: blue;
}

.current a {
      text-decoration: none;
}
与：

像这样的怎么样

我们在这里所做的是使用菜单锚的href属性中包含的字符串调用updateMenu。如果字符串和元素匹配，则隐藏锚点并将其复制到a，然后复制到li元素

如果没有匹配项，则取消隐藏菜单锚，并检查li元素在本例中是否为文本节点，如果为文本节点，则删除它，因为它是由我们添加的

你要求：

我希望当前页面的链接提供一些视觉指示 点击相应的链接将是毫无意义的，因为用户是 已经在那一页了

此解决方案可以做到这一点，并使链接不可链接

当然，它不一定是这个公式，但可以是其他的变体，当然，如果您愿意，您可以使用jquery而不是普通的javascript来实现这一点

HTML

在

如果您想像您的示例中那样使用HREF，即~/About，那么您需要制定要传递给UpdateNu的字符串，就像我的示例一样

HTML

输出

/Xotic750/G5YuV/show/~/About
/Xotic750/G5YuV/show/~/About
在

请参阅以了解其其他属性

返回包含当前位置信息的location对象 该文件的附件

对于一个纯粹的css解决方案，您可以尝试一下，下面是一个演示如何使用它的示例

警告：在CSS中对非SVG元素使用指针事件是错误的 实验的该特性曾经是CSS3UI草案的一部分 但是，由于许多未解决的问题，规范已推迟到 CSS4

CSS

HTML

像这样的怎么样

我们在这里所做的是使用菜单锚的href属性中包含的字符串调用updateMenu。如果字符串与字符串匹配，则w e隐藏锚点并将其复制到a，然后将其复制到li元素

如果没有匹配项，则取消隐藏菜单锚，并检查li元素在本例中是否为文本节点，如果为文本节点，则删除它，因为它是由我们添加的

你要求：

我希望当前页面的链接提供一些视觉指示 点击相应的链接将是毫无意义的，因为用户是 已经在那一页了

此解决方案可以做到这一点，并使链接不可链接

当然，它不一定是这个公式，但可以是其他的变体，当然，如果您愿意，您可以使用jquery而不是普通的javascript来实现这一点

HTML

在

如果您想像您的示例中那样使用HREF，即~/About，那么您需要制定要传递给UpdateNu的字符串，就像我的示例一样

HTML

输出

/Xotic750/G5YuV/show/~/About
/Xotic750/G5YuV/show/~/About
在

请参阅以了解其其他属性

返回包含当前位置信息的location对象 该文件的附件

对于一个纯粹的css解决方案，您可以尝试一下，下面是一个演示如何使用它的示例

警告：在CSS中对非SVG元素使用指针事件是错误的 实验的该特性曾经是CSS3UI草案的一部分 但是，由于许多未解决的问题，规范已推迟到 CSS4

CSS

HTML

我认为这与您在这里寻找的非常接近：

JS:

我将其从DOM中删除，这是我个人的偏好，但如果您愿意，您可以添加一个类或自定义CSS

更新：将其更改为添加类而不是删除类

    $("#menu a").each(
function(index)
    {
        if(window.location.href==this.href)
        {
            $(this).addClass("current");
        }
    }
);
使用window.location.href而不是jquery href将为您提供完整的URL，而不是相对URL。这样，您就不需要解析任何一个url，只需比较这两个url即可。

我认为这与您在这里寻找的内容非常接近：

JS:

我将其从DOM中删除，这是我个人的偏好，但如果您愿意，您可以添加一个类或自定义CSS

更新：将其更改为添加类而不是删除类

    $("#menu a").each(
function(index)
    {
        if(window.location.href==this.href)
        {
            $(this).addClass("current");
        }
    }
);
使用window.location.href而不是jquery href将为您提供完整的URL，而不是相对URL。这样，您就不需要解析任何一个url，只需比较两者。

我不想指出，您的css颜色没有应用于链接的原因是链接的css颜色必须在锚定标记上设置。锚定标记不会从包装元素继承颜色。试一试

.current a {color:#123456;}
或者保持css不变，但更改标记，使当前类应用于标记而不是

  • 编辑：当您的生产代码没有更改颜色时，您的JSFIDLE可以工作的原因是FIDLE文本不在A标记内

    如果希望自动检测当前所在的页面，只需将每个链接的HREF值与document.URL字符串进行比较：

    $('nav').find('a').each(function(){
    if ( document.URL.indexOf( $(this).attr('href') ) !== -1 ){
        $(this).parent().addClass('current');
    }
});
    此处提供详细说明和测试：->

    编辑2：还有一件事。。。您的asp.net链接会有点混乱，因为document.URL将不包含~字符。。。只需从href值中删除第一个字符，如下所示：

     var href = $(this).attr('href').split(1); //
 if ( document.URL.indexOf( href[1] ) !== -1 ){
      ...
    我不想指出你的css颜色没有被应用到你的链接上的原因是链接的css颜色必须在锚定标记上设置锚定标记不会从包装元素继承颜色。试一试

    .current a {color:#123456;}
    或者保持css不变，但更改标记，使当前类应用于    标记而不是

  • 编辑：当您的生产代码没有更改颜色时，您的JSFIDLE可以工作的原因是FIDLE文本不在A标记内

    如果希望自动检测当前所在的页面，只需将每个链接的HREF值与document.URL字符串进行比较：

    $('nav').find('a').each(function(){
    if ( document.URL.indexOf( $(this).attr('href') ) !== -1 ){
        $(this).parent().addClass('current');
    }
});
    此处提供详细说明和测试：->

    编辑2：还有一件事。。。您的asp.net链接会有点混乱，因为document.URL将不包含~字符。。。只需从href值中删除第一个字符，如下所示：

     var href = $(this).attr('href').split(1); //
 if ( document.URL.indexOf( href[1] ) !== -1 ){
      ...
    您的更新3已关闭

    给你的身体一个ID，不管你想要的页面名是什么，给你的链接ID，就像这样

    <body id="about">
    <nav>
        <ul id="menu">
            <li class="home"><a href="~/">Home</a></li>
            <li class="about"><a href="~/About">About</a></li>
            <li class="contact"><a href="~/Contact">Contact</a></li>
        </ul>
    </nav>
</body
    这将忽略所有未使用的类，只将选定的一个类涂成红色。

    您的更新3已关闭

    给你的身体一个ID，不管你想要的页面名是什么，给你的链接ID，就像这样

    <body id="about">
    <nav>
        <ul id="menu">
            <li class="home"><a href="~/">Home</a></li>
            <li class="about"><a href="~/About">About</a></li>
            <li class="contact"><a href="~/Contact">Contact</a></li>
        </ul>
    </nav>
</body
    这将忽略任何未使用的类，只将选定的一个类涂成红色。

    已更新

    再想一想，您的问题是，当您单击指向新页面的链接时，您正在刷新javascript…因此，单击事件会触发，但随后会立即被您浏览到的任何页面的原始DOM元素替换

    改用这个：

    jQuery(function () {
    $("nav ul li").css("color", "black");
    var currentLI = theOneClicked; //??? how to get this???
    $(currentLI).css("color", "blue");
});
    HTML/Razor

    <nav>
    <ul id="menu">
        <li><a href="/">Home</a></li>
        <li><a href="/About">About</a></li>
        <li><a href="/Contact">Contact</a></li>
    </ul>
</nav>
    jQuery

    $(document).ready(function () {
        $("#menu a").each(function(){
            //set all menu items to 'black
            $(this).css("color","black");

            var linkPath=$(this).attr("href");
            var relativePath=window.location.pathname.replace('http://'+window.location.hostname,'');

            //set the <a> with the same path as the current address to blue
            if(linkPath==relativePath)
                $(this).css("color","blue");
        });
});
    更新

    再想一想，你的问题是t 当您单击指向新页面的链接时，您正在刷新javascript…因此，对于您浏览到的任何页面，单击事件将触发，但随后立即被原始DOM元素替换

    改用这个：

    jQuery(function () {
    $("nav ul li").css("color", "black");
    var currentLI = theOneClicked; //??? how to get this???
    $(currentLI).css("color", "blue");
});
    HTML/Razor

    <nav>
    <ul id="menu">
        <li><a href="/">Home</a></li>
        <li><a href="/About">About</a></li>
        <li><a href="/Contact">Contact</a></li>
    </ul>
</nav>
    jQuery

    $(document).ready(function () {
        $("#menu a").each(function(){
            //set all menu items to 'black
            $(this).css("color","black");

            var linkPath=$(this).attr("href");
            var relativePath=window.location.pathname.replace('http://'+window.location.hostname,'');

            //set the <a> with the same path as the current address to blue
            if(linkPath==relativePath)
                $(this).css("color","blue");
        });
});
    我将从您当前使用的链接中删除链接。您可以通过在CSS中以不同的方式定位li和li a来控制样式。唯一稍微有点棘手的事情是为您正在使用的链接获取正确的实际href值，但这应该不会太难。而且代码也不多

    $(function(){
    var href = window.location.pathname.replace(/.*\//, "/"),
        $active = $("nav ul#menu a[href='"+href+"']");
    $active.replaceWith($active.text());
});
    我将从您当前使用的链接中删除链接。您可以通过在CSS中以不同的方式定位li和li a来控制样式。唯一稍微有点棘手的事情是为您正在使用的链接获取正确的实际href值，但这应该不会太难。而且代码也不多

    $(function(){
    var href = window.location.pathname.replace(/.*\//, "/"),
        $active = $("nav ul#menu a[href='"+href+"']");
    $active.replaceWith($active.text());
});
    我在我的网站上使用这些。它不使用JavaScript，但它几乎满足了您的要求

    <style>
.header-nav a:target {
    pointer-events: none;
    color: #000;
    font-weight: bold;
    text-decoration: underline;
}
</style>
<p class="header-nav">
    <a id="headerabout" href="/about.html#headerabout">about</a>
    |
    <a id="headertags" href="/tags.html#headertags">tags</a>
    |
    <a id="headershit" href="/shit.html#headershit">Shit I say</a>
</p>
    它将id添加到锚点及其目标URL。如果锚定为：target ed，它们将被完全禁用。此外，如果当前页面与锚定目标页面匹配，添加to href属性将导致锚定在单击时不会刷新。

    我在网站上使用这些属性。它不使用JavaScript，但它几乎满足了您的要求

    <style>
.header-nav a:target {
    pointer-events: none;
    color: #000;
    font-weight: bold;
    text-decoration: underline;
}
</style>
<p class="header-nav">
    <a id="headerabout" href="/about.html#headerabout">about</a>
    |
    <a id="headertags" href="/tags.html#headertags">tags</a>
    |
    <a id="headershit" href="/shit.html#headershit">Shit I say</a>
</p>
    它将id添加到锚点及其目标URL。如果锚定为：target ed，它们将被完全禁用。此外，如果当前页面与锚定目标页面匹配，则添加to href属性将导致锚定在单击时不会刷新。

    您可能必须向链接添加类似current的类，然后使用类设置链接样式。您可以共享导航htmlI吗？我相信您正在尝试的是，“你在这里导航。”如果你用谷歌搜索这个词，你会得到很多结果。如果你不使用服务器语言，最好使用jQuery，制作一个css类currentPage左右。如果$location.attr'href'.indexOf'home'，将id添加到所有链接中，并在jQuery就绪函数中使用此id=-1$'home'.addClass'currentPage'；您可以在if-else条件中添加所有ID。您的更新3非常好，除非您需要用作ID选择器，而不是。你调用的是类，而不是id。你可能需要在链接中添加一个类似current的类，然后使用类设置链接样式。你可以共享导航htmlI吗？我相信你要做的是“You is here navigation”。如果你搜索这个词，你会得到很多结果。如果你不使用服务器语言，最好使用jQuery，使css类成为currentPage左右。如果$location.attr'href'.indexOf'home'，将id添加到所有链接中，并在jQuery就绪函数中使用此id=-1$'home'.addClass'currentPage'；您可以在if-else条件中添加所有ID。您的更新3非常好，除非您需要用作ID选择器，而不是。您调用的是类，而不是id。这向我展示了如何使About始终为黑色，但我认为缺少一些jQuery来实际实现此功能。$'nav ul li a'。单击函数{$this.addClass'current'。兄弟姐妹。removeClass'current'；}；//（可选）在其中添加fancybox，并返回false..@psychobrm：这正是我想要的优雅化；我在这里犹豫了一下：回答这个问题，我会给它打分并奖励它。@ClayShannon很乐意帮忙。还有，我来这里不是为了奖励…：这向我展示了如何使About始终是黑色的，但我认为缺少一些jQuery来实际实现此功能。$'nav ul li a'。单击函数{$this.addClass'current'。兄弟。removeClass'current'；}；//（可选）在其中添加fancybox，并返回false..@psychobrm：这正是我想要的优雅化；我在这里犹豫了一下：回答这个问题，我会给它打分并奖励它。@ClayShannon很乐意帮忙。还有，我来这里不是为了奖励…：我今晚会把这件事解决掉；但是，对于以前是最新的但现在不再是最新的页面，是否也需要相应的.removeClasscurrent？注意，如果用户将About链接捣碎，它将变成color cccc；如果他们使用mash，那么联系人就不会是CCCC和contact now了？上面的代码只处理当前页面，即location.href。。为了处理以前浏览过的页面，我会使用CSS，比如：访问过的pseudos..今晚我会把它处理掉；但是，对于以前是最新的但现在不再是最新的页面，是否也需要相应的.removeClasscurrent？注意，如果用户将About链接捣碎，它将变成color cccc；如果他们使用mash，那么联系人就不会是CCCC和contact now了？上面的代码只处理当前页面，即location.href。。为了处理以前查看过的页面，我会使用CSS，比如：访问过的伪代码。那么我的更新6和7呢？至少在JSFIDLE中，它似乎是有效的，尽管我承认有点笨拙，但我知道应该有一种不太详细的方式，正如更新7中的伪代码所示。你的FIDLE是有效的，因为LI中没有链接。
    我不太确定你想达到什么目的。小提琴的另一个问题是，它会将li文本设置为适当的颜色，但除非您覆盖    标记上的默认单击事件，否则它将加载一个新页面-一旦加载该页面，您所做的任何更改都将被否定。我想要实现的是非常基本的，我认为几乎每个网站都希望这样做：当网站上的各个页面都有导航链接时，当前页面应该与其他页面不同，以显示它是当前页面；也许禁用它，这本身可能会改变外观。这没什么大不了的，只是为了让用户知道他们在哪里，而不是点击链接然后停留在同一个位置。导航到你已经在的地方有点像在汽车已经行驶时打开点火开关，而不是在磨蹭。不，我在找比这简单得多的东西。我只需要选择最后一个链接，即当前链接，以不同于所有其他链接的方式显示。我认为上面psychobrm的答案会起作用，但我必须先在家里把它说出来。我的更新6和7怎么样？至少在JSFIDLE中，它似乎起作用了，尽管承认有点笨拙，但我知道必须有一种不太冗长的方式，正如更新7中的伪代码所表明的那样。你的小提琴起作用是因为在LI中没有链接。我不太确定你想达到什么目的。小提琴的另一个问题是，它会将li文本设置为适当的颜色，但除非您覆盖标记上的默认单击事件，否则它将加载一个新页面-一旦加载该页面，您所做的任何更改都将被否定。我想要实现的是非常基本的，我认为几乎每个网站都希望这样做：当网站上的各个页面都有导航链接时，当前页面应该与其他页面不同，以显示它是当前页面；也许禁用它，这本身可能会改变外观。这没什么大不了的，只是为了让用户知道他们在哪里，而不是点击链接然后停留在同一个位置。导航到你已经在的地方有点像在汽车已经行驶时打开点火开关，而不是在磨蹭。不，我在找比这简单得多的东西。我只需要选择最后一个链接，即当前链接，以不同于所有其他链接的方式显示。我认为psychobrm上面的答案会奏效，但我必须先在家里把它解释清楚；我认为这可能会使事情复杂化。将身体标识为“大约”、“家”或“联系”没有任何意义，因为所有人都使用导航块/区段。只要你将导航块与身体分开，就完全有意义。nav块，即使包括在内，仍然被读取并呈现为纯HTML。只要你的导航块嵌套在你的身体内，这将起作用。CSS正在为特定元素制定规则。它将忽略该页面上未包含的元素。我无法测试它，还必须等到下班回家，但似乎在这里添加jQuery:to usitelayout.cshtml应该可以工作……如果您不刷新页面，并且通过ajax获取所有信息，那么就可以了。另外，我知道你在这里有很多答案，但不确定这是否是该评论的答案；我认为这可能会使事情复杂化。将身体标识为“大约”、“家”或“联系”没有任何意义，因为所有人都使用导航块/区段。只要你将导航块与身体分开，就完全有意义。nav块，即使包括在内，仍然被读取并呈现为纯HTML。只要你的导航块嵌套在你的身体内，这将起作用。CSS正在为特定元素制定规则。它将忽略该页面上未包含的元素。我无法测试它，还必须等到下班回家，但似乎在这里添加jQuery:to usitelayout.cshtml应该可以工作……如果您不刷新页面，并且通过ajax获取所有信息，那么就可以了。另外，我知道你在这里有很多答案，但不确定这是否是该评论的答案。