I have the following code :-
<a href="/">
<h1>Hello Wolrd</h1>
<p>This is some description</p>
<div>....this is Image Carousel</div>
<div class="dotButton>
<button></button>
<button></button>
<button></button>
</div>
</a>
Here I put a image carousel with dot button in a link tag. Here I face one problem. When I click the card it redirects href link for using a tag. But problem is when I click dot button to slide the images, it ridirect href link. How can I disable href and working dot button for sliding images.
Thank you!
You can use this :
<a href="javascript:void(0)">
<h1>Hello Wolrd</h1>
<p>This is some description</p>
<div>....this is Image Carousel</div>
<div class="dotButton">
<button></button>
<button></button>
<button></button>
</div>
</a>
And after that when you will click the image it will not redirect you anymore.
You can use onClick handler function if you want to run some logic like this:
// for functional Components
const handleClick=(e)=>{
e.preventDefault();
// write your logic for on click
}
<a onClick={handleClick}>
<h1>Hello Wolrd</h1>
<p>This is some description</p>
<div>....this is Image Carousel</div>
<div class="dotButton">
<button></button>
<button></button>
<button></button>
</div>
</a>
with this you can do your other stuff on clicking the anchor without redirecting.