使用 jQuery 选择特定 href 的锚标记

Question

目标

刷新浏览器后，我希望用户保持 menu/content 刷新前的状态。

问题

刷新浏览器后，用户在刷新前所在的特定菜单的内容显示为活动状态（即显示在屏幕上）。但是，该特定内容的菜单图标未显示为活动状态（即它不显示黑色）。

我正在努力选择当前 href （用户在刷新之前所在的那个是刷新后一样）。

尝试

$(document).ready(function() {

        $('a[class^=menu]').click(function() {
          $('a[class^=menu]').removeClass('active');
          $('div[class^=content]').removeClass('active');

          if($(this).hasClass('menu-1')) {
            $('.menu-1').addClass('active');
            $('.content-1').addClass('active');
          }

          if($(this).hasClass('menu-2')) {
            $('.menu-2').addClass('active');
            $('.content-2').addClass('active');
          }

          if($(this).hasClass('menu-3')) {
            $('.menu-3').addClass('active');
            $('.content-3').addClass('active');
          }
        });

        if (window.location.hash.substr(1) != '') {
          $('a[class^=menu],div[class^=content]').removeClass('active');

          // making the content active
          $('#' + window.location.hash.substr(1)).addClass('active');

          // making the menu active
          $('a[href="' + window.location.hash.substr(1) + '"]').addClass("active");

        }

      });

    .container {
      margin: 0 auto;
      background-color: #eee;
      border: 1px solid lightgrey;
      width: 20vw;
      height: 90vh;
      font-family: sans-serif;
      position: relative;
    }

    header {
      background-color: lightgreen;
      padding: 5px;
      text-align: center;
      text-transform: uppercase;
    }

    .bottom-navbar {
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 6px 0;
      overflow: hidden;
      background-color: lightgreen;
      border-top: 1px solid var(--color-grey-dark-3);
      z-index: 50;
      display: flex;
      justify-content: space-between;
    }

    .bottom-navbar>a {
      display: block;
      color: green;
      text-align: center;
      text-decoration: none;
      font-size: 20px;
      padding: 0 10px;
    }

    .bottom-navbar>a.active {
      color: black;
    }

    .menu-1.active,
    .menu-2.active,
    .menu-3.active {
      color: black;
    }

    .content-1,
    .content-2,
    .content-3 {
      display: none;
    }

    .content-1.active,
    .content-2.active,
    .content-3.active {
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

 
 <div class="container">
    <header>My header</header>
    <div class="main-content">
      <div class="content-1 active" id="firstPage">House content</div>
      <div class="content-2" id="secondPage">Map content</div>
      <div class="content-3" id="thirdPage">Explore content</div>
      <div class="bottom-navbar">
        <a href="mywebsite#firstPage" class="menu-1 active"><i class="fa fa-home"></i></a>
        <a href="mywebsite#secondPage" class="menu-2"><i class="fa fa-map"></i></a>
        <a href="mywebsite#thirdPage" class="menu-3"><i class="fa fa-search"></i></a>
      </div>
    </div>
 </div>

感谢您的帮助和建议。

Answer 1

如果导航与当前页面 url 相同，这听起来像是要向导航中添加 class？

如果你想做这个客户端，像这样的东西会起作用。这也可以由服务器处理 (php/c#)

$(function(){
    var current = location.pathname;
    $('#nav li a').each(function(){
        var $this = $(this);
        // if the current path is like this link, make it active
        if($this.attr('href').indexOf(current) !== -1){
            $this.addClass('active');
        }
    })
})

类似 thread/issue - 来自 Rob M Add Active Navigation Class Based on URL

的回答

Answer 2

你遇到的问题是你找错了 href。

你试图找到 a[href="secondPage"] 但它应该是 a[href="mywebsite#secondPage"]

我还更改了您选择类并将它们添加为活动状态的方式。这种方式更动态。

注意：在JS文件中，有一个变量叫hash，现在指向#secondPage为了假装我们在第二页，你可以改变这个值, 重新运行它，它会选择一个新的活动项目。你只需要将hash替换成window.location.hash，我也把它取出来一个变量，这样你就不用每次都调用它了。

// just replace this with "window.location.hash"
const hash = "#secondPage";
$(document).ready(function() {

  $('a[class^=menu]').click(function() {
    // we remove the active classes.
    $('a[class^=menu]').removeClass('active');
    $('div[class^=content]').removeClass('active');

    // we get the item that was clicked and select the item
    // in a dynamic way.
    const clickedClass = $(this).attr('class');
    const [identifier, number] = clickedClass.split('-')

    $(`.${clickedClass}`).addClass('active');
    $(`.content-${number}`).addClass('active');

  });


  const active = hash.substr(1);
  if (active != '') {
    $('a[class^=menu],div[class^=content]').removeClass('active');


    // making the content active
    $(`#${active}`).addClass('active');


    // making the menu active
    $(`a[href="mywebsite#${active}"]`).addClass("active")

  }

});

.container {
  margin: 0 auto;
  background-color: #eee;
  border: 1px solid lightgrey;
  width: 20vw;
  height: 90vh;
  font-family: sans-serif;
  position: relative;
}

header {
  background-color: lightgreen;
  padding: 5px;
  text-align: center;
  text-transform: uppercase;
}

.bottom-navbar {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 6px 0;
  overflow: hidden;
  background-color: lightgreen;
  border-top: 1px solid var(--color-grey-dark-3);
  z-index: 50;
  display: flex;
  justify-content: space-between;
}

.bottom-navbar>a {
  display: block;
  color: green;
  text-align: center;
  text-decoration: none;
  font-size: 20px;
  padding: 0 10px;
}

.bottom-navbar>a.active {
  color: black;
}

.menu-1.active,
.menu-2.active,
.menu-3.active {
  color: black;
}

.content-1,
.content-2,
.content-3 {
  display: none;
}

.content-1.active,
.content-2.active,
.content-3.active {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<div class="container">
  <header>My header</header>
  <div class="main-content">
    <div class="content-1 active" id="firstPage">House content</div>
    <div class="content-2" id="secondPage">Map content</div>
    <div class="content-3" id="thirdPage">Explore content</div>
    <div class="bottom-navbar">
      <a href="mywebsite#firstPage" class="menu-1 active"><i class="fa fa-home"></i></a>
      <a href="mywebsite#secondPage" class="menu-2"><i class="fa fa-map"></i></a>
      <a href="mywebsite#thirdPage" class="menu-3"><i class="fa fa-search"></i></a>
    </div>
  </div>
</div>

使用 jQuery 选择特定 href 的锚标记

Selecting the anchor tag of a particular href using jQuery

javascript

jquery

href

location-href

fragment-identifier