This feels like the dumbest question I've asked on SO. I can't figure out how to make an img tag clicable in React...
<a className="App-link" href="https://www.google.com" target="_blank" rel="noopener noreferrer">
<img src="facebook_ad.jpg" className="App-ad" alt="facebook ad" />
</a>
Why the above code doesn't work? When I click on the img it just selects it.
Ignore the question... I had my links wrapped in several divs and for some reason this was preventing the links to open. I removed those divs and now the link works.
Related
Below I put a screenshot of some ReactJS code which are buttons that are linked to another part of my website.
I was wondering why this code was not working correctly when I click on it.
<Actions>
<PrimaryButton href="/about" css="">
Start Searching
</PrimaryButton>
<SecondaryButton href="/about">
Learn More
</SecondaryButton>
</Actions>
I tried the above solution and when I clicked the button, it did nothing.
You can use a tag to open an another page. You can use target _blank to open in a new tab or you can use _self to open the same tab.
<a className="your classname" target="_blank" rel="noopener noreferrer" href="/about"
Start Searching
/>
I am trying to get people to follow my twitter and discord by clicking on the words "Twitter" or "Discord" in the midst of my text. How would I do that below?
<p className="leading-[1.8] md:leading-[1.8] text-base md:text-xl max-w-[700px] my-9 font-secondary">
Follow
us on Twitter or join us in Discord to receive all pertinent news as it happens.{' '}
</p>
Thanks in advance!
You can try using span when nested. Little extra so that when clicked they open up on separate tabs.
<span> <a href="yourtwitter" target="_blank"
rel="noreferrer"> #yourTwitter </a> </span>
Try it plz. It works on my side.
//A simple link in Text to redirect an external website
<a className="leading-[1.8] md:leading-[1.8] text-base md:text-xl max-w-[700px] my-9 font-secondary" href="https://stackoverflow.com/questions/73980752/how-to-make-a-word-clickable-in-text-on-react-js/73980765#73980765" target="_blank" rel="noopener noreferrer">
Follow us on Twitter or join us in Discord to receive all pertinent news as it happens.{' '}
</a>
React uses JSX (or TSX if you're using TypeScript), so you can use any standard HTML tags, including <a/> to link to things.
Follow us on Twitter
Just use the a tag like this:
<p>Follow me on Twitter</p>
I am having trouble setting up my routing using 'react-router-dom'. The problem is if I use the NavLink class, the a tag is lost and bootstrap wont display the css behavior.
What i'd like to happen is figure out a way to get the classes working like a normal a tag. Even if I have the btn btn-outline-primary, having the NavLink will interfere with the css properties.
***edit: I found the problem. If I set all routes for testing purpose to="/", every link is going to be active. So, afterall, Bootstrap is working perfectly, just have to make sure to test it once all routes are set.
<li className="nav-item">
<NavLink to='/' className="btn btn-light mr-1" href="#">
<i class="fas fa-user"></i> Perfíl
</NavLink>
</li>
try nesting the li in the Navlinks and also pass the bootstrap classes to the li and not the Navlink route. remove the href
Semi-novice web developer getting increasingly frustrated with my Joomla editor changing my code. I've research online and found Q&As that hint at a similar problem but I can't seem to figure this out.
Essentially it's code to create a linked image with a text caption added on hover. Desired code shown below:
<ul class="photo-grid">
<li>
<figure><a href="index.php?option=com_hikashop&view=category&layout=listing&Itemid=179"><img src="images/purple-biothane-waterproof-dog-collars.jpg" alt="purple biothane waterproof dog collars" width="280" height="187" /><figcaption>
<p>Waterproof collars</p>
</figcaption></figure></a>
<p class="photocaption">FEATURED PRODUCT</p>
</li>
BUT each time I open the editor the </a> tag has been moved upwards, directly after the <img> tag. Can anyone offer a resolution, I'd really appreciate it. Thanks.
You are closing the <a> tag after </figure> but you have opened it within <figure> so therefore it needs closing inside <figure>. So use:
<ul class="photo-grid">
<li>
<figure>
<a href="index.php?option=com_hikashop&view=category&layout=listing&Itemid=179">
<img src="images/purple-biothane-waterproof-dog-collars.jpg" alt="purple biothane waterproof dog collars" width="280" height="187" />
<figcaption>
<p>Waterproof collars</p>
</figcaption>
</a>
</figure>
<p class="photocaption">FEATURED PRODUCT</p>
</li>
How to click on one link among several to which all of them having same id.
And it has only one means through which we can get it,that is id.
And through xpath ,we can't do because every time I open the tab,location of that link changes,so xpath changes too.
There are lots of links having same id,it differs through text written above it.so to refer that link,I also mention it through that text,but still not able to do.
In other words,there are links(with images) placed one by one,on execution,I want 3 link to execute but it executes the first one due to having same id's.so what should I do to click the third link not the first one.
<span class="online-signal"></span>
<figure>
<img id="UserImagePreview" src='/Content/PatientPhotos/default.jpg' alt="" />
</figure>
<figcaption class="doc-des-cap" title="Y">Z </figcaption>
<figcaption>Rating: 4</figcaption>
<span class="select-btn">
<a id="linkAppointment" docid="727" docname="x" href="javascript:void(0)">Select</a>
</span>
<span class="offline-signal"></span>
<figure>
<img id="UserImagePreview" src='/Content/PatientPhotos/default.jpg' alt="" />
</figure>
<figcaption class="doc-des-cap" title="C">B</figcaption>
<figcaption>Rating: 0</figcaption>
<span class="select-btn">
<a id="linkAppointment" docid="49" docname="A" href="javascript:void(0)">Select</a>
</span>
Try using the below xpath
//figcaption[contains(#title, 'Y')]/preceding-sibling::figure/img[#id='UserImagePreview']
Replace the title with the <figcaption> title attribute of the respective img you want to locate
Hope this helps you...if it is still not working kindly get back