how to get a specific string in an href in javascript

Question

I am trying to create an onload event where a function compares the current URL to an href and displays content according to the href that is shown. I want to accomplish this by selecting a child from a parent, though I am unsure as to how to get the contents within the href specifically. Here is a bit of the code I have written:

html

<ul id="main-nav">
      <li class="nav active"><a href="#shipping">Shipping</a></li>
      <li class="nav"><a href="#returns">returns</a></li>
      <li class="nav"><a href="#custom">Custom Orders</a></li>
      <li class="nav"><a href="#replacements">Replacements/ Warranty</a></li>
      <li class="nav"><a href="#mostFAQs">Most Frequently Asked Questions</a></li>
      <li class="nav"><a href="#RAD">RAD Principles</a></li>
      <li class="nav"><a href="#environmental">Environmental Stewardship</a></li>
      <li class="nav"><a href="#USA">MADE in the USA</a></li>
</ul>

js

var href = $("#main-nav").children('a');

$("div.faq-container").hide();

if (window.location.href.includes(href)) {
    $("div.faq-container").eq("0").show();
} else (window.location.href.includes(href)) {
    $("div.faq-container").eq("1").show();
}

the main issue I have is that I want to write the line that has

var href = $("#main-nav").children('a');

so that it grabs the contents within the href alone, and nothing else outside of that, so that it would have either "#shipping", "#returns", etc. as its value.

Louys Patrice Bessette · Accepted Answer · 2021-02-12 17:52:44Z

2

You took the problem by the wrong end. What you need to know is the location.hash to target the right div to display.

This should be closer:

var hash = window.location.hash

// Hide all .faq-container
$("div.faq-container").hide()

// If there is a hash
if(hash){
  $("#"+hash).show()
}

answered Feb 12, 2021 at 17:52

Louys Patrice Bessette

34k7 gold badges40 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

terrymorse · Accepted Answer · 2021-02-12 18:40:52Z

Here's a vanilla JavaScript example which will make the selected section visible.

It uses the hashchange event to detect when the hash has changed.

  const sections = [...document.querySelectorAll('.section')];
  function showSelected () {
    sections.forEach(section => section.classList.remove('show'));
    if(location.hash.length) {
      const section = document.querySelector(location.hash);
      if (section) {
        section.classList.add('show');
      }
    }
  }
  window.addEventListener('hashchange', showSelected);

    .section {
      margin: 0.5rem;
      padding: 0.5rem;
      background-color: #e0e0e0;
      width: 10rem;
      display: none;
    }
    .show {
      display: block;
    }

<ul id="main-nav">
  <li class="nav active"><a href="#shipping">Shipping</a></li>
  <li class="nav"><a href="#returns">returns</a></li>
  <li class="nav"><a href="#custom">Custom Orders</a></li>
  <li class="nav"><a href="#replacements">Replacements/ Warranty</a></li>
  <li class="nav"><a href="#mostFAQs">Most Frequently Asked Questions</a></li>
  <li class="nav"><a href="#RAD">RAD Principles</a></li>
  <li class="nav"><a href="#environmental">Environmental Stewardship</a></li>
  <li class="nav"><a href="#USA">MADE in the USA</a></li>
</ul>

<div id="shipping" class="section">#shipping</div>
<div id="returns" class="section">#returns</div>
<div id="custom" class="section">#custom</div>
<div id="replacements" class="section">#replacements</div>
<div id="mostFAQs" class="section">#mostFAQs</div>
<div id="RAD" class="section">#RAD</div>
<div id="environmental" class="section">#environmental</div>
<div id="USA" class="section">#USA</div>

Collectives™ on Stack Overflow

how to get a specific string in an href in javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related