CODEWITHSUNDEEP
htmlwebhyperlink
Jeff F
Jeff F

Reputation: 25

How to create conditional Hyperlink (actual case)

I'm trying to add a text hyperlink button that leads to different pages on different conditions..and I need help for the HTML code. My website screenshot: my website screenshot

sorry the website is not in english, so I will be as specific as possible so anyone can understand what I'm saying.

The screenshot show a page from my website, and it contains tab filters on the products.
The highlighted element is the 'All' category tab, and next to it is the 'Audio' tab and 'Mic' tab and so on.
So right below the product catalog, which is beneath the category , I want to add a text hyperlink "See more" button, which will recognize which tab I am looking into at the moment, and take me to the full catalog page of the category.

All I know of HTML code for conditional html statement is like:

<a href="Default URL.com" onclick="doClick(); return false;">See More</a>

With JS:

function doClick() {
   if (clicked on "Audio" tab)
       window.hlocation.href = "Audio Page URL.com"
   else if (clickd on "Mic" tab)
       window.location.href = "Mic Page URL.com"
....
   else
       window.location.href = "Last Page URL.com"

I know how to locate HTML codes to locate the division...but I'm not sure how to actually put them into codes as conditional statement.

I'm sharing the URL of my page : http://tantara.shop/main-shop/

please help.

Upvotes: 2

Views: 659

Answers (1)

Spectric
Spectric

Reputation: 31992

You could decide to use this approach:

  • Record when the user selects a tab
  • Add a specific class when a tab is clicked. Make sure to remove all other tabs of this specific class.
  • When the user clicks on "See more", we simply fetch the tab that has the specific class

It is demonstrated below:

$(document).ready(function() {

  $("a").on('click', function() {
    var selected = $("div .selected");
    console.log("someurl.com/category/all/" + selected.text());
  });

});

function update(element) {
  ridOfOtherClass();
  $(element).addClass("selected");
}
var buttons = $("div");

function ridOfOtherClass() {
  for (var i = 0; i < buttons.length; i++) {
    $(buttons[i]).removeClass("selected");
  }
}
.as-console-wrapper{
  max-height:50px !important;
  /*Overrides so user is guaranteed space to click the "See more" button. DO NOT USE THIS CSS ON YOUR WEBSITE - IT IS STACK SNIPPET ONLY*/
}
div{
  cursor:pointer;
}
a{
  cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" id="wp-block-library-css" href="http://tantara.shop/wp-includes/css/dist/block-library/style.min.css?ver=5.6" type="text/css" media="all">
<div class="elementor-tabs-wrapper">
  <div id="elementor-tab-title-1001" class="elementor-tab-title elementor-tab-desktop-title elementor-active elementor-repeater-item-c510f25 selected" data-tab="1" tabindex="1001" role="tab" aria-controls="elementor-tab-content-1001" onclick="update(this)">All</div>
  <div id="elementor-tab-title-1002" class="elementor-tab-title elementor-tab-desktop-title  elementor-repeater-item-97b56a1" data-tab="2" tabindex="1002" role="tab" aria-controls="elementor-tab-content-1002" onclick="update(this)">Audio Interface</div>
  <div id="elementor-tab-title-1003" class="elementor-tab-title elementor-tab-desktop-title  elementor-repeater-item-2658a88" data-tab="3" tabindex="1003" role="tab" aria-controls="elementor-tab-content-1003" onclick="update(this)">Monitor Speaker</div>
  <div id="elementor-tab-title-1004" class="elementor-tab-title elementor-tab-desktop-title  elementor-repeater-item-91a22ba" data-tab="4" tabindex="1004" role="tab" aria-controls="elementor-tab-content-1004" onclick="update(this)">MIC</div>
  <div id="elementor-tab-title-1005" class="elementor-tab-title elementor-tab-desktop-title  elementor-repeater-item-81bf58f" data-tab="5" tabindex="1005" role="tab" aria-controls="elementor-tab-content-1005" onclick="update(this)">Keyboard</div>
  <div id="elementor-tab-title-1006" class="elementor-tab-title elementor-tab-desktop-title  elementor-repeater-item-eb73db8" data-tab="6" tabindex="1006" role="tab" aria-controls="elementor-tab-content-1006" onclick="update(this)">Midi controller</div>
  <div id="elementor-tab-title-1007" class="elementor-tab-title elementor-tab-desktop-title  elementor-repeater-item-1a3ff00" data-tab="7" tabindex="1007" role="tab" aria-controls="elementor-tab-content-1007" onclick="update(this)">Accessory</div>
</div>
<a>See more</a>
<!-- Please understand that I did not understand any of the words in the untranslated version. As Google Translation has demonstrated considerable capabilities in translating properly, I chose to translate with that.-->

If you're not sure what's supposed to be happening, click on a tab and click "See more." An example URL will be shown, which can be customized into a GET request etc,.

Upvotes: 1

Related Questions