英文:
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?
<ul>
<li class="link-a"><a href="https://google.com">LINK A</a></li>
<li class="link-b"><a href="https://yahoo.com">LINK B</a></li>
</ul>
<button type="submit">Open clicked link</button>
答案1
得分: 2
以下是您要翻译的内容:
"我不确定为什么您想这样做,但以下是实现您期望结果的方法,此示例中无需使用 jQuery,
方法:
- 选择所有链接并为每个链接添加点击事件
- 阻止链接点击时的默认行为
- 添加一个CSS类(或自定义属性)来标记被点击的链接
- 从其他链接中删除CSS类以防止混淆
- 为提交按钮添加点击事件,跳转到所选链接的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:
- select all links and add click event on each one of them
- prevent the default behaviour on links click
- add a css class (or custom attribute) to label the clicked link
- remove the css class from other links to prevent confuses
- 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('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('please select a link');
}
});
<!-- language: lang-css -->
.clicked {
color: red;
}
<!-- language: lang-html -->
<ul>
<li class="link-a"><a href="https://google.com">LINK A</a></li>
<li class="link-b"><a href="https://yahoo.com">LINK B</a></li>
</ul>
<button type="submit">Open clicked link</button>
<!-- 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() {
$('a').click(function(e) {
e.preventDefault();//prevent the default behaviour
$('a').removeClass('clicked');//remove class first from all links
$(this).addClass('clicked');//add class to currently clicked link
});
$('button').click(function() {
window.location.href = $('a.clicked').attr('href');//get the current clicked link URL and open it
});
});
<!-- language: lang-css -->
.clicked {
color: red;
}
<!-- language: lang-html -->
<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">LINK A</a>
</li>
<li class="link-b">
<a href="https://yahoo.com">LINK B</a>
</li>
</ul>
<button type="submit">Open clicked link</button>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论