Question

在我的网站上，我有三个页面：主页，关于和联系人。我希望当前页面的链接给出一些可视指示，单击相应的链接将是毫无意义的，因为用户已经在该页面上。这个任务是由CSS还是jQuery更好地处理，在任何一种情况下，最优雅的解决方案是什么，它也将自动应用于将来可能添加的任何页面？

这是我的HTML diebezueglich：

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

更新

我想知道为什么这不起作用;我添加到Site.css：

nav ul li a.current {
    color: blue;
}

更新2

我试着用它来测试这里提出的各种想法的混合方式：

在Site.css中：

.current {
    color: blue;
}

在_SiteLayout.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>

在Default.cshtml中：

<script type="text/javascript">
    $(document).ready(function () {
        $("#tabs").tabs();
        $(".fancybox").fancybox();
        $("home").addClass('current');
    });
</script>

......但是没有去; “Home”链接与以往一样温馨（没有双关语）。

我也试过给所有链接一个id“location”并将其添加到Default.cshtml的“ready”函数中：

if ($(#location).attr('href').indexOf('home') != -1) $('home').addClass('currentPage');
else if ($(#location).attr('href').indexOf('about') != -1) $('about').addClass('currentPage');
else if ($(#location).attr('href').indexOf('contact') != -1) $('contact').addClass('currentPage');

（其中“currentPage”是将颜色设置为蓝色的css类，每个导航链接的id为“location”）;我想我还需要为每个if / else块中索引为-1的两个链接添加“removeClass”。

我的啤酒在纳秒时变得越来越咸。

更新3

我试过了：

在_SiteLayout.cshtml中添加了ID：

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

并将其添加到Site.css：

#home {color: orange;}
#home.current {color: blue;}
#about {color: orange;}
#about.current {color: blue;}
#contact {color: orange;}
#contact.current {color: blue;}

...但它没有做任何事情 - 无论我在哪里导航，所有链接仍然是灰色的。

更新4

也试过这个无济于事：

if ($('#home').attr('href').indexOf('Home') != -1) $('#home').addClass('currentPage');

更新5

我想知道是否有办法使用_PageStart.cshtml来处理这个问题？我可以做点什么：

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

//然后是一些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 Developers”启发的另一种可能性就是“ready”函数中的以下内容（伪代码;如果这样可行，我欢迎具体的jQuery，我需要将其充实）： / p>

// 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使用点击事件来实现它的方法。 Elegantizations欢迎来到这里的jsfiddle：http://jsfiddle.net/vV4h5/1/

至于上面的jsfiddle的元素化，必须有办法做这样的事情：

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

更新8

它适用于jsfiddle，但不适用于我的项目;在_SiteLayout.cshtml中有这个：

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

。。

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

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

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

......不起作用。也没有将第一个函数移动到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");
    });
});

Answer 1

您必须为此活动状态创建一个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>

我在这里做了一个快速示例，以便您可以看到这是否是您正在寻找的： Example in jsFiddle.net

祝福

Answer 2

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

http://jsfiddle.net/qmHeF/1/

JS：

 $("#menu a").each(
    function(index)
        {
            if(window.location.href==this.href)
            {
                $(this).parent().remove();
            }
        }
    );

我在这里删除它（我的个人偏好），但如果你愿意，你可以添加一个类或自定义CSS。

http://jsfiddle.net/qmHeF/2/

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

    $("#menu a").each(
function(index)
    {
        if(window.location.href==this.href)
        {
            $(this).addClass("current");
        }
    }
);

使用window.location.href而不是jquery href将为您提供完整的URL而不是相对URL。这样你就不需要解析任何一个url，你可以只比较这两个。

Answer 3

您可以使用某些服务器端语言（例如PHP）进行检查，以查看当前页面是否为Home，About或Contact，并相应地应用“当前”类。或者，如果您愿意，可以使用JavaScript执行此操作。我不确定你的绝对网址是什么样的，但我会做这样的事情：

$(document).ready(function() {
     $('a[href="' + window.location.pathname + '"]').addClass('current');
});

您可能需要在其中添加一些正斜杠，具体取决于您的网址外观。

Answer 4

此通用开发任务有三套解决方案：1）服务器端脚本为您改变菜单/链接，2）使用类似“当前”类或3）javascript / css混合解决方案的CSS样式。

这完全取决于您的系统和开发范围。对于大型动态站点，显然有人可能会使用服务器端代码，如果它已经被使用了。但对于大多数尚未使用此类脚本的项目，可以手动将“当前”类添加到链接中，并根据需要使用CSS设置样式，或者更多地将锚点完全包裹文本（取决于您的链接样式） /菜单）。

对于更强大的JavaScript解决方案，您可以尝试这样做：automatic link hightler/styling

function extractPageName(hrefString)
{
    var arr = hrefString.split('/');
    return  (arr.length < 2) ? hrefString : arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase();
}

function setActiveMenu(arr, crtPage)
{
    for (var i=0; i < arr.length; i++)
    {
        if(extractPageName(arr[i].href) == crtPage)
        {
            if (arr[i].parentNode.tagName != "DIV")
            {
                arr[i].className = "current";
                arr[i].parentNode.className = "current";
            }
        }
    }
}

function setPage()
{
    hrefString = document.location.href ? document.location.href : document.location;

    if (document.getElementById("nav") !=null )
    setActiveMenu(document.getElementById("nav").getElementsByTagName("a"), extractPageName(hrefString));
}

然后运行setPage onload，例如：

window.onload=function()
{
    setPage();
}

就可用性而言，人们普遍认为只需将导航链接设计为看起来不那么有趣，对比度较低，灰度较低，不加下划线等，足以帮助人们了解他们的情况。单击已经存在的链接的成本非常低，但无论如何它对于大多数网站来说都是一个很好的设计触摸。

Answer 5

您的更新＃2应该有效，但您忘记输入“＃”（$('#home').addClass...）。

但如果它再次无效，请特别注意你的CSS

例如，如果您有像

这样的CSS

#home{color : blue;}
.current{color : orange;}

由于#home为“更强”，文字将为蓝色

如果我们将值放到选择器： ID = 10 类= 5 节点选择器（div）= 1

所以#home = 10且高于.current等于5，#home样式将覆盖。

你可以使用li.current但是再次，5 + 1 = 6，它低于id。

但#home.current等于15！这将超越#home样式！

但是如果您的颜色样式位于节点本身且属性为style=""，则必须使用jquery删除它或使用!important：

.current{
    color: blue !important;
}

它将覆盖每个css，但不建议这样做。

Answer 6

以编程方式更改我的链接，基于当前网址，我更喜欢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代码将“当前”类添加到a属性设置为href的任何last part of address链接（最后一个/之后）。如果您的链接有点像/Contact/More ..

，那就不完美了

Answer 7

您的“更新2”版本即将开始工作 - 您只需要将课程添加到#home，而不是home

类似的东西：

.current {
    color: blue;
}

.current a {
      text-decoration: none;
}

使用：

// ...
$("#home").addClass('current');
// ...

Answer 8

这样的事情怎么样？

我们在这里做的是我们使用菜单锚点的updateMenu属性中包含的字符串调用href。如果字符串与anchor.href匹配，则我们会隐藏锚点并将其text content复制到new text node，然后append将parentNode复制到li元素。< / p>

如果我们没有匹配，那么我们取消隐藏菜单锚点并检查li元素（本例中为last child）jsfiddle是否为文本节点，如果它是我们删除它，因为它是由我们添加。

您要求：

我希望当前页面的链接给出一些视觉指示点击相应的链接将是无意义的用户已经在那个页面上。

此解决方案可以做到这一点，并且还会使链接无法点击。

当然它不一定是这个公式，但可以是其他一些变体，当然你可以使用jquery而不是vanilla javascript来实现这个。如果你愿意的话。

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>

的Javascript

(function () {
    var updateMenu = (function () {
        var anchors = document.getElementById("menu").getElementsByTagName("a");

        return function (page) {
            Array.prototype.forEach.call(anchors, function (anchor) {
                var last;

                if (anchor.pathname === page) {
                    anchor.style.display = "none";
                    anchor.parentNode.appendChild(document.createTextNode(anchor.textContent));
                } else {
                    last = anchor.parentNode.lastChild;
                    anchor.style.display = "block";
                    if (last.nodeType === 3) {
                        anchor.parentNode.removeChild(last);
                    }
                }
            });
        }
    }());

    setTimeout(function () {
        updateMenu("/");
        setTimeout(function () {
            updateMenu("/About");
            setTimeout(function () {
                updateMenu("/Contact");
                setTimeout(function () {
                    updateMenu("");
                }, 5000);
            }, 5000);
        }, 5000);
    }, 5000);
}());

在jsfiddle

上

我想在你的例子中使用href，即“〜/ About”，那么你需要制定你的字符串以传递给updateMenu，就像我的例子一样; < / p>

HTML

<a href="~/About">About</a>

的Javascript

console.log(document.getElementsByTagName("a")[0].pathname);
console.log(window.location.pathname + "~/About");

输出

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

在window.location

上

请参阅pointer-events了解其他属性

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

对于纯粹的css解决方案，您可以尝试使用jsfiddle，这是一个显示正在使用的{{3}}。

警告：在非SVG元素的CSS中使用指针事件是实验。该功能曾经是CSS3 UI草案的一部分但是，由于许多未解决的问题，已被推迟到 CSS4。

CSS

.current {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: black;
}

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>

Answer 9

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

.current a {color:#123456;}

或保留你的css，但是改变你的标记，以便将“当前”类应用于＆lt; a＆gt;标签而不是＆lt; li＆gt;。

编辑：你的jsfiddle在尝试更改颜色时（而你的生产代码没有）的原因是因为小提琴文本不在A标签内。

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

$('nav').find('a').each(function(){
    if ( document.URL.indexOf( $(this).attr('href') ) !== -1 ){
        $(this).parent().addClass('current');
    }
});

详细说明＆amp;可在此测试： - ＆gt; http://jsfiddle.net/vV4h5/26/

编辑＃2：还有一件事......你的asp.net链接会因为document.URL不包含〜字符而弄乱这个...只需将你的href值中的第一个字符删除为如下：

 var href = $(this).attr('href').split(1); //
 if ( document.URL.indexOf( href[1] ) !== -1 ){
      ...

Answer 10

您的更新＃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

然后你的CSS看起来有点像你的更新＃3例子：

li a {color:blue}
#home .home{color:red !important}
#about .about{color:red !important}
#contact .contact{color:red !important}

这应该忽略任何未使用的类，只将选定的一个着色为红色。

Answer 11

<强>已更新

第二个想法，你的问题是当你点击新页面的链接时，你正在刷新javascript ...所以click事件会触发，但会立即被原来的{{1}取代您浏览的任何页面的元素。

请改用：

HTML /剃须刀

DOM

的jQuery

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

Answer 12

我只是删除你当前所在的链接。您可以通过在CSS中以不同方式定位li和li a来控制样式。唯一有点棘手的问题是为你正在使用的链接获得正确的href值，但这不应该太难。这不是很多代码。

$(function(){
    var href = window.location.pathname.replace(/.*\//, "/"),
        $active = $("nav ul#menu a[href='"+href+"']");
    $active.replaceWith($active.text());
});

Answer 13

我在我的网站上使用它们。它不使用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，则将完全禁用它们。此外，如果当前页面与锚目标页面匹配，则在向#属性添加href到单击时，锚不会刷新。

如何将当前页面的链接视为禁用外观？

更新

更新2

更新3

更新4

更新5

更新6

更新7

更新8

13 个答案: