打开选择的<a>标签链接后提交按钮?

huangapple go评论54阅读模式
英文:

Open selected <a> tag link on button submit?

问题

I searched so much here but I didn't find the solution to my problem, I found the solution with the select option field but I can't use that.

So, I would like to click on one of these two links and open the link just on the button submit, I suppose it requires some jquery? Is anyone that could help?

英文:

I searched so much here but I didn't find the solution to my problem, I found the solution with the select option field but I can't use that.

So, I would like to click on one of these two links and open the link just on the button submit, I suppose it requires some jquery? Is anyone that could help?

&lt;ul&gt;
  &lt;li class=&quot;link-a&quot;&gt;&lt;a href=&quot;https://google.com&quot;&gt;LINK A&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&quot;link-b&quot;&gt;&lt;a href=&quot;https://yahoo.com&quot;&gt;LINK B&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;button type=&quot;submit&quot;&gt;Open clicked link&lt;/button&gt;

答案1

得分: 2

以下是您要翻译的内容:

"我不确定为什么您想这样做,但以下是实现您期望结果的方法,此示例中无需使用 jQuery,

方法:

  1. 选择所有链接并为每个链接添加点击事件
  2. 阻止链接点击时的默认行为
  3. 添加一个CSS类(或自定义属性)来标记被点击的链接
  4. 从其他链接中删除CSS类以防止混淆
  5. 为提交按钮添加点击事件,跳转到所选链接的URL
const links = document.querySelectorAll('ul li a'),
      submitBtn = document.querySelector('button');

links.forEach(link => {
    link.addEventListener('click', (e) => {
        e.preventDefault();
        links.forEach(i => i != link ? i.classList.remove('clicked') : i.classList.add('clicked'));
    });
});

submitBtn.addEventListener('click', () => {
  if(document.querySelector('.clicked')) {
    location.href = document.querySelector('.clicked').href
  } else {
    alert('请选择一个链接');
  }
});
.clicked {
  color: red;
}
<ul>
  <li class="link-a"><a href="https://google.com">链接 A</a></li>
  <li class="link-b"><a href="https://yahoo.com">链接 B</a></li>
</ul>

<button type="submit">打开已点击的链接</button>

希望这对您有帮助。"

英文:

Am not sure why you would like to do that, but here is a way to achieve your desired result, no need to jQuery in this example,

Approach:

  1. select all links and add click event on each one of them
  2. prevent the default behaviour on links click
  3. add a css class (or custom attribute) to label the clicked link
  4. remove the css class from other links to prevent confuses
  5. add click event to your submit button and go to the URL in the selected link

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const links = document.querySelectorAll(&#39;ul li a&#39;),
      submitBtn = document.querySelector(&#39;button&#39;);

links.forEach(link =&gt; {
    link.addEventListener(&#39;click&#39;, (e)=&gt; {
        e.preventDefault();
        links.forEach(i =&gt; i != link ? i.classList.remove(&#39;clicked&#39;) : i.classList.add(&#39;clicked&#39;));
    });
});

submitBtn.addEventListener(&#39;click&#39;, ()=&gt; {
  if(document.querySelector(&#39;.clicked&#39;)) {
    location.href = document.querySelector(&#39;.clicked&#39;).href
  } else {
    alert(&#39;please select a link&#39;);
  }
});

<!-- language: lang-css -->

.clicked {
  color: red;
}

<!-- language: lang-html -->

&lt;ul&gt;
  &lt;li class=&quot;link-a&quot;&gt;&lt;a href=&quot;https://google.com&quot;&gt;LINK A&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&quot;link-b&quot;&gt;&lt;a href=&quot;https://yahoo.com&quot;&gt;LINK B&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;button type=&quot;submit&quot;&gt;Open clicked link&lt;/button&gt;

<!-- end snippet -->

答案2

得分: 1

a) 点击链接时,阻止其默认行为,然后添加一个类,您可以像下面这样实现您想要的行为:

b) 点击按钮时,获取新添加类的链接的 href 并打开它。

$(document).ready(function() {
  $('a').click(function(e) {
    e.preventDefault(); // 阻止默认行为
    $('a').removeClass('clicked'); // 先从所有链接中删除类
    $(this).addClass('clicked'); // 将类添加到当前点击的链接
  });
  $('button').click(function() {
    window.location.href = $('a.clicked').attr('href'); // 获取当前点击链接的 URL 并打开它
  });
});
.clicked {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="link-a">
    <a href="https://google.com">链接 A</a>
  </li>
  <li class="link-b">
    <a href="https://yahoo.com">链接 B</a>
  </li>
</ul>

<button type="submit">打开已点击的链接</button>
英文:

You can achieve your desired behavior like below:

a) on click of link prevent its default behavior and then add a class to it.

b) On click of a button get the href of the newly added class link and open it.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).ready(function() {
  $(&#39;a&#39;).click(function(e) {
    e.preventDefault();//prevent the default behaviour
    $(&#39;a&#39;).removeClass(&#39;clicked&#39;);//remove class first from all links
    $(this).addClass(&#39;clicked&#39;);//add class to currently clicked link
  });
  $(&#39;button&#39;).click(function() {
    window.location.href = $(&#39;a.clicked&#39;).attr(&#39;href&#39;);//get the current clicked link URL and open it
  });
});

<!-- language: lang-css -->

.clicked {
  color: red;
}

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;ul&gt;
  &lt;li class=&quot;link-a&quot;&gt;
    &lt;a href=&quot;https://google.com&quot;&gt;LINK A&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;link-b&quot;&gt;
    &lt;a href=&quot;https://yahoo.com&quot;&gt;LINK B&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;button type=&quot;submit&quot;&gt;Open clicked link&lt;/button&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月13日 17:20:08
  • 转载请务必保留本文链接:https://go.coder-hub.com/76003777.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定