Question

在包含一些导航链接的页面中，我希望当前页面的链接突出显示，就像这样：

alt text

链接“ HTML属性”会突出显示（粗体），因为此链接会将一个链接到当前页面。

我知道这可以手动实现（只是高亮显示相应的链接，但是有一些聪明的方法吗？动态地自动突出显示正确的链接？

Answer 1

<强> CSS：

.topmenu ul li.active a, .topmenu ul li a:hover {
    text-decoration:none;
    color:#fff;
    background:url(../images/menu_a.jpg) no-repeat center top;
}

<强> JavaScript的：

<script src="JavaScript/jquery-1.10.2.js" type="text/javascript"></script> 

<script type="text/javascript">
    $(function() {
        // this will get the full URL at the address bar
        var url = window.location.href;

        // passes on every "a" tag
        $(".topmenu a").each(function() {
            // checks if its the same on the address bar
            if (url == (this.href)) {
                $(this).closest("li").addClass("active");
                //for making parent of submenu active
               $(this).closest("li").parent().parent().addClass("active");
            }
        });
    });        
</script>

Html代码：

<div class="topmenu">
    <ul>
        <li><a href="Default.aspx">Home</a></li>
        <li><a href="NewsLetter.aspx">Newsletter</a></li>
        <li><a href="#">Forms</a></li>
        <li><a href="#">Mail</a></li>
        <li><a href="#">Service</a></li>
        <li style="border:none;"><a href="#">HSE</a></li>
        <li><a href="#">MainMenu2</a>
           <ul>
              <li>submenu1</li>
              <li>submenu2</li>
              <li>submenu3</li>
          </ul>
       </li>
    </ul>
</div>

Answer 2

您可以将页面正文的ID设置为代表当前页面的某个值。然后，对于菜单中的每个元素，您可以设置特定于该菜单项的类。在CSS中，您可以设置一个规则，专门突出显示菜单项......

这可能没什么意义，所以这是一个例子：

<body id="index">
<div id="menu">
 <ul>
  <li class="index"     ><a href="index.html">Index page</a></li>
  <li class="page1"     ><a href="page1.html">Page 1</a></li>
 </ul>
</div> <!-- menu -->
</body>

在page1.html中，您可以将正文的ID设置为：id="page1"。

最后在你的CSS中你会得到以下内容：

#index #menu .index, #page1 #menu .page1 {
  font-weight: bold;
}

您需要更改每个页面的ID，但CSS保持不变，这很重要，因为CSS经常被缓存，并且可能需要强制刷新才能更新。

它不是动态的，但它是一种简单易行的方法，您可以使用PHP或类似方法从模板文件中include菜单html。

Answer 3

在我看来，你需要当前的代码作为这个“.menu-current css”，我问同样的代码就像魅力一样，你可以尝试这样的东西可能仍然是一些配置

a:link, a:active {
    color: blue;
    text-decoration: none;
}

a:visited {
    color: darkblue;
    text-decoration: none;
}

a:hover {
    color: blue;
    text-decoration: underline;
}

div.menuv {
    float: left;
    width: 10em;
    padding: 1em;
    font-size: small;
}


div.menuv ul, div.menuv li, div.menuv .menuv-current li {
    margin: 0;
    padding: 0;
    list-style: none;
    margin-bottom: 5px;
    font-weight: normal;
}

div.menuv ul ul {
    padding-left: 12px;
}

div.menuv a:link, div.menuv a:visited, div.menuv a:active, div.menuv a:hover {
    display: block;
    text-decoration: none;
    padding: 2px 2px 2px 3px;
    border-bottom: 1px dotted #999999;
}

div.menuv a:hover, div.menuv .menuv-current li a:hover {
    padding: 2px 0px 2px 1px;
    border-left: 2px solid green;
    border-right: 2px solid green;
}

div.menuv .menuv-current {
    font-weight: bold;
}

div.menuv .menuv-current a:hover {
    padding: 2px 2px 2px 3px;
    border-left: none;
    border-right: none;
    border-bottom: 1px dotted #999999;
    color: darkblue;
}

Answer 4

<script id="add-active-to-current-page-nav-link" type="text/javascript">
    function setSelectedPageNav() {
        var pathName = document.location.pathname;
        if ($("nav ul li a") != null) {
            var currentLink = $("nav ul li a[href='" + pathName + "']");
            currentLink.addClass("active");
        }
    }
    setSelectedPageNav();
</script>

Answer 5

Css课程在这里

<style type="text/css">
.mymenu
{
    background-color: blue;
    color: white;
}
.newmenu
{
    background-color: red;
    color: white;
}
</style>

像这样制作HTML，将网址设为ID

  <div class="my_menu" id="index-url"><a href="index-url">Index</a></div>
  <div class="my_menu" id="contact-url"><a href="contact-url">Contac</a></div>

这里写javascript，把这个javascript放在HTML代码之后。

    function menuHighlight() {
       var url = window.location.href;
       $('#'+tabst).addClass('new_current');
    }
    menuHighlight();

Answer 6

我通常会在服务器端处理这个问题（意思是PHP，ASP.NET等）。这个想法是，当加载页面时，服务器端控制机制（可能通过设置CSS值），该机制反映在客户端看到的结果HTML中。

Answer 7

尝试使用

a:active{
font-weight: bold;
}

在你的css文件中。

Answer 8

您可以使用Javascript来解析DOM，并突出显示与第一个h1标签相同标签的链接。但我认为这太过分了=）

最好设置一个包含页面标题的var，并使用它在相应的链接中添加一个类。

Answer 9

我通常使用一个类来实现这一目标。实现任何东西，导航链接，超链接等都非常简单。

在CSS文档中插入：

.current,
nav li a:hover {
   /* styles go here */
   color: #e00122;
   background-color: #fffff;
}

这将使列表项的悬停状态具有红色文本和白色背景。将该类电流附加到“当前”页面上的任何链接，它将显示相同的样式。

我的HTML插入内容：

<nav>
   <ul>
      <li class="current"><a href="#">Nav Item 1</a></li>
      <li><a href="#">Nav Item 2</a></li>
      <li><a href="#">Nav Item 3</a></li>
   </ul>
</nav>

Answer 10

请查看以下内容：

以下是工作内容：

1。）顶部菜单按钮可见并正确突出显示

2。）点击顶部菜单后，子菜单按钮不可见

以下是需要工作的内容：

1。）单击子菜单时，查找新页面以保持所选子菜单打开（我将突出显示所选子菜单按钮以进一步说明导航）

请在此处查看代码： http://jsbin.com/ePawaju/1/edit

或在这里： http://www.ceramictilepro.com/_6testingonly.php#

<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

我是否需要将此脚本放在头部？最好的地方在哪里？

<div class="left">
<nav class="vmenu">
    <ul class="vnavmenu">
        <li data-ref="Top1"><a class="hiLite navBarButton2" href="#">Home</a>
        </li>
    </ul>
    <ul class="Top1 navBarTextSize">
        <li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">sub1</a>
        </li>
        <li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">sub2</a>
        </li>
        <li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">sub3</a>
        </li>
        <li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">sub4</a>
        </li>
    </ul>
    <ul class="vnavmenu">
        <li data-ref="Top2"><a class="hiLite navBarButton2" href="#">Repairs</a>
        </li>
    </ul>
    <ul class="Top2 navBarTextSize">
        <li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">1sub1</a>
        </li>
        <li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">2sub2</a>
        </li>
        <li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">3sub3</a>
        </li>
        <li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">4sub4</a>
        </li>
    </ul>
</nav>

JQuery对我来说是新手，任何帮助都会非常感激:) var子菜单;

$('.vnavmenu li').click(function () {
var elems = $('.vmenu ul:not(.vnavmenu)').length;
var $refClass = $('.' + $(this).attr('data-ref'));
var visible = $refClass.is(':visible');

$('.vmenu ul:not(.vnavmenu)').slideUp(100, function () {

    if (elems == 1) {
        if (!visible) $refClass.slideDown('fast');
    }

    elems--;
});

if (visible) $('#breadcrumbs-pc').animate({
    'margin-top': '0rem'
}, 100);
else $('#breadcrumbs-pc').animate({
    'margin-top': '5rem'
}, 100);
});

Answer 11

JavaScript：

<script type="text/javascript">
    $(function() { 
        var url = window.location;
        $('ul.nav a').filter(function() {
            return this.href == url;
        }).parent().parent().parent().addClass('active');
    });   
</script>

CSS：

.active{
    color: #fff;
    background-color: #080808;
}

HTML：

<ul class="nav navbar-nav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true"><i class="glyphicon glyphicon-user icon-white"></i> MY ACCOUNT <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li>
                                    <?php echo anchor('myaccount', 'HOME', 'title="HOME"'); ?>
                                </li>
                                <li>
                                    <?php echo anchor('myaccount/credithistory', 'CREDIT HISTORY', 'title="CREDIT HISTORY"'); ?>
                                </li>
                          </ul>
                     </li>
</ul>

Answer 12

我更喜欢使代码尽可能简短明了，并避免使用任何外部文件（包括 jquery）。因此，在研究了几个主题后，我最终得出了以下结论 - 使用纯 Javascript 和 CSS，不需要 jquery。

在菜单完成后立即放置 javascript 代码（在关闭 ul、div 等之后） - 片段中的代码应该在 <script>Copy code here</script> 之间这将允许在加载菜单后立即执行脚本。如果您想在页面加载时将其作为函数调用，那么只有在加载所有元素（包括图像）后链接才会更改 – 将此代码放在一个函数中，在页面加载时调用它，代码本身放在结束标记之前，例如所以：

<script>
    function highlightCurrentURL() {
      var a = document.getElementById("navig").getElementsByTagName("a");
      for (var i = 0; i < a.length; i++) {
        if (a[i].href.split("#")[0] == document.location.href.split("#")[0]) {
          a[i].className = "current";
        }
      }
    }
    // 
    window.onload = function() {
      highlightCurrentURL();
    }
</script>

// restrict search to a parent with specific ID (main), rather than search in the whole document
var a = document.getElementById("navig").getElementsByTagName("a");
console.log("Current URL: ", document.location.href.split("#")[0]);
console.log("Links found in HTML: ");
for (var i = 0; i < a.length; i++) {
  // for debugging you can check all found URLs in console (accessible in development mode) and delete next line after debugging
  console.log(a[i].href);
  // strip off any local (withing page) anchors (symbol "#" and what follows after)
  if (a[i].href.split("#")[0] == document.location.href.split("#")[0]) {
    // add a class to the matched link (<a>), define it in CSS
    a[i].className = "current";
  }
}

nav#navig a.current {
  color: red;
}

<nav id="navig">
  <ul>
    <li><a href="/url1">url1 name</a></li>
    <li><a href="/url2">url2 name</a></li>
    <li><a href="/url3">url3 name</a></li>
    <li><a href="https://stacksnippets.net/js#test_page_anchor">Test link matching current URL</a></li>
  </ul>
</nav>

Answer 13

您可以使用 PHP 或 Jquery 以各种方式实现这一点。这是我在我的项目中实现它的方式。

<?php 
    //set a default value when the page is not an active page  

    $dashboard_active=$profile_active=$home_active='inactive_page';
    
    //get the Name of the current page;
    //in simple php set the NAME of the php file similar to the link variable
    //example set page name as home if you are going to print the variable $home/$home_active

    $page = pathinfo($_SERVER['PHP_SELF'], PATHINFO_FILENAME);

    //OR
    //in Laravel

    $page=Route::currentRouteName();
    
    //OR
    //send page value from the controller
    

    ${$page."_active"} = 'active_page';

//the above method will change the value of the current active page variable

        ?>

在html中打印php数据

<ul class="nav navbar-nav ">
<li ><a href="www.p.com/dashboard"><span class=" <?php echo $dashboard_active ?> ">  Dashboard</span></a></li>
<li ><a href="www.p.com/profile"><span class=" <?php echo $profile_active ?>"> Profile</span></a></li>
<li ><a href="www.p.com/home"><span class=" <?php echo $home_active ?>">Home</span></a></li>
</ul>

你也可以用 Jquery 做到这一点

<script>
    //with jquery
$(function(){
    //works when your href is an absolute href instead of relative href
        $('a').each(function(){
            if ($(this).prop('href') == window.location.href) {                
                $(this).children('span').addClass('active_page');  
                //to make the link only active
                $(this).addClass('active_page');   
                //to make the list active 
                $(this).panrent('li').addClass('active_page');   
            }
        });
    });
</script>

在你需要添加的 CSS 中

<style>    
.active_page:hover,.inactive_page:hover
{
  background-color: rgb(218, 119, 5)!important;
    color: white;
}
.active_page
{
  background-color: green!important;
    color: white!important;      
}

.inactive_page
{
    color:#fff;    
}
</style>

突出显示当前页面的导航菜单

13 个答案: