如何使當前頁面的鏈接看起來無效？

Question

在我的網站中，我有三個頁面：主頁、關於和聯系方式。 我希望當前頁面的鏈接給出一些視覺指示，表明點擊相應的鏈接將毫無意義，因為用戶已經在該頁面上。 這個任務是由 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>

更新

我想知道為什么這不起作用； 我在 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>

然而，鏈接保持不變（正如 Led Zeppelin 預測的那樣）。

更新 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，並將其添加到 Default.cshtml 的“就緒”函數中：

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

我試過這個：

將 ID 添加到 _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：

#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 來處理這個問題？ IOW，我可以做這樣的事情：

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

“用於 ASP.NET 開發人員的 jQuery”激發的另一種可能性類似於“就緒”函數中的以下內容（偽代碼；如果這可行，我歡迎我需要充實它的特定 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 事件來完成它。 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，這里是代碼。 小提琴已更新以顯示此代碼。 下面的評論中提供了一個使用 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 中的例子

最良好的祝願

Answer 2

我認為這與您在這里尋找的非常接近：

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，你可以比較兩者。

Answer 3

您可以使用某種服務器端語言（例如 PHP）檢查當前頁面是主頁、關於還是聯系人，並相應地應用“當前”類。 或者，如果您願意，也可以使用 JavaScript 來完成此操作。 我不確定您的絕對 URL 的外觀，但我會這樣做：

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

您可能需要在其中添加一些正斜杠，具體取決於您的 URL 的外觀。

Answer 4

這個通用開發任務有三套解決方案：1) 服務器端腳本為您更改菜單/鏈接，2) 使用類似“當前”類的 CSS 樣式，或 3) javascript/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

例如，如果你有一個像

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

文本將是藍色的，因為#home是“更強”

如果我們給選擇器賦值： id=10 class=5 node selector (div) = 1

所以#home = 10 並且高於.current等於 5， #home樣式將覆蓋。

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

但是#home.current將等於 15！ Wich 將覆蓋#home風格！

但是，如果您的顏色樣式位於具有屬性style=""的節點本身上，則必須使用 jquery 將其刪除或使用!important ：

.current{
    color: blue !important;
}

它會覆蓋每個 css，但不建議這樣做。

Answer 6

要根據當前 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 （在最后一個 / 之后）的鏈接。 如果您的鏈接有點像/Contact/More ..

Answer 7

您的“更新 2”版本即將運行 - 您只需要將類添加到#home ，而不是home

就像是：

.current {
    color: blue;
}

.current a {
      text-decoration: none;
}

和：

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

Answer 8

這樣的事情怎么樣？

我們在這里所做的是使用包含在菜單錨點的href屬性中的字符串調用updateMenu 。 如果字符串和anchor.href匹配，那么我們隱藏錨點並將其 文本內容復制到一個新的文本節點，然后我們將其附加到li元素。

如果我們沒有匹配項，那么我們取消隱藏菜單錨並檢查li元素（在本例中為parentNode ）的最后一個子節點是否是文本節點，如果是，我們將其刪除，因為它是我們添加的。

您要求：

我希望當前頁面的鏈接給出一些視覺指示，表明點擊相應的鏈接將毫無意義，因為用戶已經在該頁面上。

此解決方案做到了這一點，並且還使鏈接無法點擊。

當然，它不必完全是這個公式，但可以是其他一些變體，當然，如果您願意，您可以使用 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字符串，就像我的示例一樣；

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 上

查看window.location的其他屬性

返回一個位置對象，其中包含有關文檔當前位置的信息。

對於一個純粹的 css 解決方案，您可以嘗試pointer-events ，這是一個顯示它正在使用中的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>

Answer 9

我不想指出您的 css 顏色沒有應用於鏈接的原因是因為必須在錨標記上設置鏈接的 css 顏色（錨標記不會從包裝的 LI 元素繼承顏色）。 嘗試

.current a {color:#123456;} 

或保留您的 css，但更改您的標記，以便將“當前”類應用於 < a > 標記而不是 < li >。

編輯：您的 jsfiddle 在嘗試更改顏色時起作用（而您的生產代碼沒有）的原因是因為小提琴文本不在 A 標簽內。

如果您希望自動檢測您當前所在的頁面，只需將每個鏈接的 HREF 值與 document.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鏈接會有點混亂，因為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事件會觸發，但隨后會立即被您瀏覽到的任何頁面的原始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");
        });
});

Answer 12

我只是從您當前使用的鏈接中刪除鏈接。 您可以通過在 CSS 中li a不同的方式定位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屬性將導致單擊時錨點不會刷新。