How I can make whole div Clickable with its anchor link which is present inside the div?-CodePudding

I have one box div inside that, user can easily add link for h1 tag i.e for title tag. but I require that it should apply to the whole div. The anchor tag is coming from Wordpress editor toolbar, so how can I extract that href and add to whole div. code is using React.

eg :

<div >

  <h1>
    <a href="https://stackoverflow.com/questions/13396721/if-href-url-change-add-class-to-parent-      element">The new face of marketing</a>
  </h1>
  <p>Marketing</p>
</div>

I will need whatever user will add url for title it should apply to whole div and make div clickable with respect to its url.

CodePudding user response：

IT IS NOT Working On this Snippet
You can see here Codepen link Link Open in New Tab Using Jquery

You can find the URL in a tag and set it to a div for clickability using "jQuery."
When you click on ".box," you'll see the tag "a" inside. and click the link to open it in a new tab.

$(document).ready(function () {
  $(".box").click(function() {   
     strUrl=$(this).find("a").attr("href");       
     window.open(strUrl);return false;         
  });
});

.box{
  background:lightgreen;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div >
  <h1>
    <a href="https://stackoverflow.com/questions/13396721/if-href-url-change-add-class-to-parent-element">The new face of marketing</a>
  </h1>
  <p>Marketing</p>
</div>

CodePudding user response：

One approach to this is the following, with explanatory comments in the code:

// find all <h1> elements that are the children of a .box element,
// and iterate over that collection using NodeList.prototype.forEach():
document.querySelectorAll('.box > h1').forEach(
  // using an Arrow function we pass a reference to the current
  // <h1> element into the function body:
  (heading) => {
    // we find the <a> element within the <h1>
    let anchor = heading.querySelector('a'),
      // we get a reference to the .box ancestor element:
      box = heading.closest('.box');

    // if there is an anchor (querySelector() returns null if the
    // element is not found) and the ancestor box does not match
    // the CSS selector:
    if (anchor && !box.matches('a > .box')) {
      // we insert the children of the anchor into the <h1> before the
      // anchor element itself:
      while(anchor.firstChild){
        heading.insertBefore(anchor.firstChild, anchor);
      }
      // we find the parentNode of the box element, and insert the anchor
      // before the box element:
      box.parentNode.insertBefore(anchor, box);
      // we append the box element to the anchor element:
      anchor.append(box);

      // the following may not be required, but it depends on the
      // CSS rules, so it's here in case it's required:

      // we add the class of 'box' to the anchor's classList:
      anchor.classList.add('box');
      // we remove the 'box' class for the box element:
      box.classList.remove('box');
    }
  })

*,
::before,
::after {
  box-sizing: border-box;
  font-family: system-ui;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 1.2em;
}

main {
  display: grid;
  gap: 0.5em;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  inline-size: clamp(20em, 80vw, 1200px);
  margin-block: 1em;
  margin-inline: auto;
}

main .box {
  border: 2px solid #000;
  padding: 1em;
}

a.box {
  border-color: orange;
}

div.box {
  border-color: lime;
}

@media screen and (width < 800px) {
  main {
    grid-template-columns: 1fr;
  }
}

<main>
  <div >
    <h1><a href="https://stackoverflow.com/questions/13396721/if-href-url-change-add-class-to-parent-element">Should be changed by the JavaScript</a></h1>
    <p>Marketing</p>
  </div>

  <a href="https://stackoverflow.com/questions/13396721/if-href-url-change-add-class-to-parent-element" >
    <div >
      <h1>Should not be changed by the JavaScript</h1>
      <p>Marketing</p>
    </div>
  </a>

  <a href="https://stackoverflow.com/questions/13396721/if-href-url-change-add-class-to-parent-element" >
    <div>
      <h1>Should not be changed by the JavaScript</h1>
      <p>Marketing</p>
    </div>
  </a>
</main>

JS Fiddle demo.

References:

CodePudding user response：

If you're looking for a jQuery solution as your tag indicates, this is how I would do it.

$(document).off('click.clickableBox').on('click.clickableBox', '.clickable-box', function(e){
    e.preventDefault();
    window.location.href = $(this).attr('href');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  href="https://stackoverflow.com/questions/13396721/if-href-url-change-add-class-to-parent-element">

  <h1>
    <a href="https://stackoverflow.com/questions/13396721/if-href-url-change-add-class-to-parent-element">The new face of marketing</a>
  </h1>
  <p>Marketing</p>
</div>

Explanation

Add a href tag to the div you want to be clickable as well as a class clickable-box.
Define a jQuery listener to watch for any click event on a div with the class clickable-box and redirect the page to the url defined in the div href tag.