使用jQuery选择特定href的锚标记 [英] Selecting the anchor tag of a particular href using jQuery

问题描述

目标

刷新浏览器后，我希望用户停留在刷新之前的菜单/内容中.

After refreshing the browser, I would like that the user stays in the menu/content they were before refreshing.

问题

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

After refreshing the browser, the content of the particular menu in which the user was before refreshing is shown as active (i.e. it is shown on the screen). However, the menu icon of that particular content is NOT shown as active (i.e. it does not show a black colour).

我正在努力选择当前href (用户在刷新前所处的位置，刷新后是相同的)的锚元素(找到图标的地方) .

I am struggling in selecting the anchor element (where the icon is found) of the current href (the one the user was in before refreshing which is the same after refreshing).

尝试

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

感谢您的帮助和建议.

推荐答案

您遇到的问题是您正在寻找错误的href.

the problem that you had was that your were looking for the wrong href.

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

you were trying to find a[href="secondPage"] but it should be a[href="mywebsite#secondPage"]

我还改变了您选择班级并将其添加为活动状态的方式.这样更动态.

also I changed the way you were selecting the classes and adding them to be active. this way is more dynamic.

注意:在JS文件中，有一个名为hash的变量，现在它指向#secondPage以便假冒我们在第二页上，您可以更改该值，然后重新运行它将选择一个新的活动项目.您只需要将hash替换为window.location.hash，我也将其带到一个变量中，因此您不必每次都调用它.

note: in the JS file, there is a variable called hash, now it points to be #secondPage in order to fake that we are on the second page, you can change the value, re run it and it will pick a new active item. you just need to replace hash to be window.location.hash, also I took it out to a variable so you don't call it every time.

// 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的锚标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！