时间戳

首页 > 解决方案 > 如何创建条件超链接（实际案例）

html - 如何创建条件超链接（实际案例）

问题描述

我正在尝试添加一个文本超链接按钮，该按钮在不同的条件下指向不同的页面。我需要有关 HTML 代码的帮助。我的网站截图： 我的网站截图

抱歉，该网站不是英文的，所以我会尽可能具体，以便任何人都能理解我在说什么。

屏幕截图显示了我网站上的一个页面，它包含产品的标签过滤器。
突出显示的元素是“所有”类别选项卡，旁边是“音频”选项卡和“麦克风”选项卡等。
因此，在产品目录的正下方，即类别下方，我想添加一个文本超链接“查看更多”按钮，该按钮将识别我目前正在查看的选项卡，并将我带到该类别的完整目录页面.

我所知道的条件 html 语句的 HTML 代码如下：

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

使用 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"

我知道如何定位 HTML 代码来定位分区......但我不确定如何将它们作为条件语句实际放入代码中。

我正在分享我页面的 URL：http: //tantara.shop/main-shop/

请帮忙。

标签： htmlwebhyperlink

解决方案

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,.

推荐阅读