How do I make an empty href=“” unclickable?

I'm building a theme with html/css and liquid. The user can determine if a image should have an url or not. That's pretty easy to achieve with:

<a href=" klant_logo.logo_url " target=" klant_logo.nieuw_tabblad " > <img src=" img_url: 500, quality: 70 " alt="logo"/></a>

BUT, when the user doesn't add a url, the above code generates this as HTML which is still clickable and navigates to the top of the page (like with href="#">.

Is there a way (HTML, Jquery, i don't know) to make href="" only clickable if it has an actual url between the brackets?

EDIT: thanks for the quick reply's! This dit the trick:

% if klant_logo.logo_url != "" % <a href=" klant_logo.logo_url " target=" klant_logo.nieuw_tabblad " > <img src=" img_url: 500, quality: 70 " alt="logo"/></a> % else % <img src=" img_url: 500, quality: 70 " alt="logo"/>% endif %

Possible duplicate of Is it possible to make an HTML anchor tag not clickable/linkable using CSS?

– zyd
Sep 18 '18 at 19:02

@zyd thanks, never found that one after searching for half an hour... Fixed it myself though :) Thanks again for the help!

– David Hakkert
Sep 18 '18 at 19:06

that is an interesting solution you came up with, I like it! Simple and explicit

– zyd
Sep 20 '18 at 15:54

2 Answers
2

You can have a CSS class that makes certain links unavailable:

.inactiveLink pointer-events: none; cursor: default;

Then you can do something like this:

<a href=" klant_logo.logo_url " class="klant_logo.logo_url ? 'inactiveLink' : '' " />

Basically this:stackoverflow.com/questions/6727659/…

– zyd
Sep 18 '18 at 19:01

@dustytrash thx! That seems to work :) But I found an other approach as well a minute ago (I was to quick to start asking on stack...) with some variables that worked as well!

– David Hakkert
Sep 18 '18 at 19:03

The better logic would be to check the user entered value if its blank or null.

Also you might like to refer : jQuery hyperlinks - href value?

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

搜尋此網誌

Dfyjkt