如何给当前页面's链接一个禁用的外观

How can I give the current page's link a disabled look?

本文关键字：一个 外观 链接 当前页      更新时间：2023-09-26

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

这是我的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>

更新

我想知道为什么这不起作用;我在Site.css中添加了如下内容:

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>

然而链接仍然保持不变(正如齐柏林飞艇预测的那样)。

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

…但是不行;"主页"链接和以前一样朴素(没有双关语)。

我也试着给所有的链接一个id的"位置"，并将其添加到默认值。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");我想我还必须为两个链接添加一个"removeClass"，在每个if/else块中索引为-1。

我的啤酒每纳秒都在变咸。

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。在"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使用click事件来完成它。优雅化欢迎来到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也不行。让它看起来像这样:

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

我认为这非常接近你在这里寻找的:

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

JS: 

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

我把它从DOM中移除(我的个人偏好)，但你可以添加一个类或自定义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，你只需要比较两个url。

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

.current {
text-decoration: none;
/* here you style the seemingly disabled link as you please */
}

对于HTML，活动菜单页应该是这样的:

如果您在About页面

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

我在这里做了一个快速的例子，这样你就可以看到这是否是你正在寻找的:jsFiddle.net中的示例

祝福

更新

仔细一想，你的问题是，当你点击链接到一个新的页面，你刷新javascript…因此，click事件触发，但随后立即被您浏览到的任何页面的原始DOM元素所取代。

用这个代替:

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

您可以使用一些服务器端语言(例如PHP)检查当前页面是Home, About还是Contact，并应用相应的"current"类。或者，如果您愿意，您也可以使用JavaScript来实现这一点。我不确定你的绝对url看起来如何，但我会这样做:

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

您可能需要在那里添加一些正斜杠，这取决于您的url的外观。

对于这个通用的开发任务有三种解决方案:1)服务器端脚本为您更改菜单/链接，2)使用类似"current"类的CSS样式，或者3)javascript/CSS混合解决方案。

这完全取决于你的系统和开发范围。对于大型动态站点，如果已经在使用服务器端代码，显然也可以使用它。但是对于大多数项目，你还没有使用这样的脚本，你可以手动添加一个"当前"类的链接和样式，你喜欢的CSS，甚至更多的锚包装文本完全(取决于你的链接/菜单的风格)。

对于一个更健壮的javascript解决方案，你可以尝试这样做:automatic link highler/styles 
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();
}

就可用性而言，人们普遍认为，只是把导航链接设计得不那么有趣、对比度更低、更灰、没有下划线等，就足以帮助人们知道他们在这里。点击链接的成本很低，但对大多数网站来说，这是一个很好的设计。

以编程方式更改我的链接，基于当前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代码将"当前"类添加到任何a链接，其href属性设置为last part of address(在last/之后)。如果你的链接有点像/Contact/More，那就不完美了。

您的"Update 2"版本接近工作-您只需要将类添加到#home，而不是home

类似:

.current {
    color: blue;
}
.current a {
      text-decoration: none;
}

: 

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

这样怎么样?

我们在这里所做的是，我们使用包含在菜单锚点的href属性中的字符串调用updateMenu。如果绳子和锚。href匹配，然后我们隐藏锚并复制它的文本内容到一个新的文本节点，然后我们将其附加到li元素。

如果我们没有匹配，那么我们取消隐藏菜单锚点，并检查li元素(在本例中为parentNode)的最后一个子节点是否为文本节点，如果是，我们删除它，因为它是由我们添加的。

您请求的:

我希望当前页面的链接给出一些视觉指示对于用户来说，点击相应的链接是毫无意义的已经在那一页了

这个解决方案做到了这一点，并使链接不可点击。

当然，它不必完全是这个公式，但可以是其他一些变体，当然，如果你喜欢，你可以使用jquery而不是普通的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 s就像你的例子，即。"~/About"，那么您将需要制定要传递给updateMenu的字符串，就像我的示例;

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

看到窗口。其他属性的位置

返回包含当前位置信息的位置对象

对于一个纯css的解决方案，你可以尝试指针事件，这里是一个jsfiddle显示它的使用。

警告:CSS中指针事件对非svg元素的使用是实验。这个特性曾经是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>

你的更新#2应该可以工作，但是你忘了放"#" ($('#home').addClass...)。

但如果它仍然不起作用，请特别注意你的CSS

例如，如果你有一个像

这样的css
#home{color : blue;}
.current{color : orange;}

文字为蓝色，因为#home是"strong "

如果我们把值放到选择器中: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，但不建议这样做。

你更新# 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}

这将忽略所有未使用的类，只将选中的类涂成红色。

我不愿意指出，你的css颜色没有应用到你的链接的原因是css颜色必须在锚标记上设置链接(锚标记不会从包装的LI元素继承颜色)。试着

.current a {color:#123456;}

或保持CSS不变，但更改标记，使"current"类应用于<标签，而不是><李> .

编辑:当你试图改变颜色时，你的jsfiddle工作的原因(而你的生产代码没有)是因为fiddle文本不在A标签内。

如果您希望自动检测当前在哪个页面上，只需比较每个链接到文档的HREF值。URL字符串:

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

详细说明&-> http://jsfiddle.net/vV4h5/26/

编辑2:还有一件事……你的asp.net链接会像文档一样弄得有点乱。URL不包含~字符…只需从href值中删除第一个字符，如下所示: 
 var href = $(this).attr('href').split(1); //
 if ( document.URL.indexOf( href[1] ) !== -1 ){
      ...

我只是从你当前的链接中删除链接。您可以通过在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，它们将被完全禁用。此外，添加#到href属性将导致锚点在当前页面与锚点目标页面匹配时不刷新。

相关文章：