Add link in <a onclick

Asked

Viewed 132 times

1

The page is this

The menus are made with Anchors and I wanted to add a link to redirect to an external page in exactly the same place. I tried to add one but without success, I have knowledge of html/css/php but I’m not able to do what I want. When I say unsuccessfully, I mean that the link does not work, and by adding my code in the middle of the other menus the text goes to the top of the page on the front end.

I hope someone can help me. Thank you, Daniel

the code is as follows and the goal is to add a link with a link to an external page, but that is positioned in the same place with the same style as these menus. (I tried to do myself what Bold is)

<header id="menu" class="menu">
  <div class="posScroll"></div>
  <div class="main">    
    <a onclick="$('#area0').animatescroll({scrollSpeed:1000,easing:'easeOutQuint'});" id="logo" class="logo"></a>
    <a onclick="$('#area1').animatescroll({scrollSpeed:1000,easing:'easeOutQuint'});" id="nav1" class="itemMenu">
      ECOPAINT
    </a>
    <a onclick="$('#area2').animatescroll({scrollSpeed:1000,easing:'easeOutQuint'});" id="nav2" class="itemMenu">
      GO GREEN
    </a>
    <a onclick="$('#area3').animatescroll({scrollSpeed:1000,easing:'easeOutQuint'});" id="nav3" class="itemMenu">
      Shёrbime
    </a>
    <a onclick="$('#area4').animatescroll({scrollSpeed:1000,easing:'easeOutQuint'});" id="nav4" class="itemMenu">
      Materiale Eco
    </a>
    <a onclick="$('#area5').animatescroll({scrollSpeed:1000,easing:'easeOutQuint'});" id="nav5" class="itemMenu">
      Çmime
    </a>
    <a onclick="$('#area6').animatescroll({scrollSpeed:1000,easing:'easeOutQuint'});" id="nav6" class="itemMenu">
      Rreth botёs
    </a>
    <a onclick="$('#area7').animatescroll({scrollSpeed:1000,easing:'easeOutQuint'});" id="nav7" class="itemMenu">
      Përshëndetje
    </a>
    **<a onclick="window.location.href=''" id="nav8" class="itemMenu">ONLINE STORE</a>**
    <div class="headerContact">
    Ecopaint Albania<br>
    <a href="mailto:"></a><br>
    +351 229 826 029   
    </div>
    <button id="showRight"></button>
  </div>
</header>
html jquery css

  • Put the code in the question and explain better what you want to do and the problem.

  • @Sam Thanks :)

  • I couldn’t figure out what you want to do. You want one of these links, when clicked, to go to another page?

  • @Sam Yes, I’ve already done that. What I want is for the "Online Store" link to appear in Chrome in the same place as in Firefox. I am also trying to change the color of the link after clicked but unsuccessfully.

1 answer

1

Daniel

Your click is not working because your logo tag is on top of the link you created. Comment or remove the line below and make a test, you can click on the link:

<a onclick="$('#area0').animatescroll({scrollSpeed:1000,easing:'easeOutQuint'});" id="logo" class="logo"></a>

Reorganize the HTML of your page so that there is no overlapping of elements.

Also you don’t need to use onClick to redirect between pages, so you can use the default Anchor tag with href. Take a look at:

https://www.w3schools.com/tags/att_a_href.asp

Regarding the overlap of elements, if you have doubt take a look at these links:

https://www.devmedia.com.br/como-usar-a-propriedade-position-css/24451 https://www.devmedia.com.br/css-z-index-entendendo-sobre-o-eixo-z-na-web/28698

  • Firefox works, but Chrome doesn’t. "link" is positioned at the top of the window. Firefox is correct, with the CSS I put it is next to the other links.

  • Nowadays it is rare to have incompatibility between browsers, I myself do not even bother to test between browsers, usually the problem is the HTML/CSS that was written. One suggestion I have for you is to avoid manually positioning each menu with the position:Absolute and left, there are 1001 simpler ways to do this. Example -> https://jsfiddle.net/ricardomalias/u6oe9yks/9/ ... You can also use libraries as bootstrap, it will make your life easier -> https://getbootstrap.com/docs/4.3/examples/product/

  • Ricardo thank you, but my knowledge is not so advanced.

  • But keep trying Daniel, no one is born knowing

  • I am trying but unsuccessfully. I was able to actually add the link, but on Chrome the Online Store link is at the top of the page totally mismatched.

Browser other questions tagged html jquery css

You are not signed in. Login or sign up in order to post.