如何将当前页面的链接视为禁用外观？ [英] How can I give the current page's link a disabled look?

问题描述

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

In my web site, I have three pages: Home, About, and Contact. I want the current page's link to give some visual indication that clicking the corresponding link would be senseless as the user is already on that page. Is this task better handled by CSS or jQuery, and in either case, what is the most elegant solution that will also automatically apply to any pages which may be added in the future?

这是我的HTML diebezueglich：

Here's my 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>

UPDATE

我想知道为什么这不是工作;我添加到Site.css这个：

UPDATE

I wonder why this didn't work; I added to Site.css this:

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

相关的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>

然而链接保持不变（如Led Zeppelin预测的那样）。

Yet the links remain the same (as Led Zeppelin predicted).

我试过这个来测试这里提出的各种想法的混合类型：

I tried this to test out kind of an amalgam of the various ideas proposed here:

在Site.css中：

In Site.css:

.current {
    color: blue;
}

在_SiteLayout.cshtml中：

In _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中：

In Default.cshtml:

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

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

...but no go; the "Home" link is as homely as ever (no pun intended).

我还试图给所有链接指定位置ID并将其添加到默认值.cshtml的就绪功能：

I also tried giving all of the links an id of "location" and adding this to Default.cshtml's "ready" function:

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;）;我估计我还必须为每个if / else块中索引为-1的两个链接添加removeClass。

(where "currentPage" is the css class that sets the color to blue, and each nav link has an id of "location"); I reckon I would also have to add a "removeClass" for the two links with an index of -1 in each if/else block.

我的啤酒越来越咸了纳秒。

My beer is getting saltier by the nanosecond.

我试过这个：

在_SiteLayout.cshtml中为元素添加了ID：

Added the IDs to the elements in _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>

并将其添加到Site.css：

And added this to Site.css:

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

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

...but it did nothing - all the links are still gray no matter where I navigate.

也试过这个无济于事：

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

更新5

我想知道是否有一种使用_PageStart.cshtml来处理这个问题的方法？我可以这样做：

UPDATE 5

I wonder if there's a way to use the _PageStart.cshtml to handle this? IOW, could I do something like:

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

//然后是一些jQuery（也是伪代码）：

//and then some jQuery (also pseudocode):

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

UPDATE 6

jQuery for ASP.NET Developers的另一种可能性就是ready函数中的以下内容（伪代码;如果这样可行，我欢迎特定的jQuery我需要充实这一点）：

UPDATE 6

Another possibility that "jQuery for ASP.NET Developers" has inspired is something like the following inside the "ready" function (pseudocode; if this would work, I welcome the specific jQuery I would need to flesh this out):

// 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的元素化，必须有办法做这样的事情：

As to the elegantization of the jsfiddle above, there must be a way to do something like this instead:

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

更新8

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

UPDATE 8

It works in jsfiddle, but not in my project; Having this in _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，因此看起来像这样：

...does not work. Neither does moving just the first function to Default.cshtml, so that it looks like this:

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

推荐答案

更新

第二个想法，你的问题是当你点击新页面的链接时，你正在刷新javascript ...所以点击事件触发，但随后会立即替换为您浏览的任何页面的原始 DOM 元素。

On second thought, your problem is that when you click the link to a new page, you are refreshing the javascript...so the click event fires but then is immediately replaced by the original DOM elements for whatever page you browse to.

改为使用：

HTML / Razor

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");
        });
});

这篇关于如何将当前页面的链接视为禁用外观？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！