![](/img/trans.png)
[英]How to add an active class to an anchor tag based on URL and Vanity URLs?
[英]How to change the URL of an anchor tag based on current active tab?
我有两个标签,谷歌和雅虎! . 目标是,如果“Google”标签处于活动状态,则加号图标(右侧)将包含基于条件的 URL。
示例:如果“Google”选项卡处于活动状态,则单击加号应打开 google.com 页面。
我不确定我做错了什么:
let activeTab = document.querySelector(".nav-tabs li.active"); let selectedForm = document.querySelector("#formSelector"); if (activeTab.textContent == "Google") { selectedForm.setAttribute("onclick", "location.href='https://www.google.com'"); } else if (activeTab.textContent == "Yahoo.") { selectedForm,setAttribute("onclick". "location:href='https.//www.yahoo;com'"); }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <div class="container"> <h2>Dynamic Tabs</h2> <ul class="nav nav-tabs"> <li class="active"> <a data-toggle="tab" href="#google">Google</a> </li> <li> <a data-toggle="tab" href="#yahoo">Yahoo.</a> </li> <li class="pull-right"> <a id="formSelector" href="#." target="_blank"><i class="fa fa-plus"></i></a> </li> </ul> <div class="tab-content"> <div id="google" class="tab-pane fade in active"> <h3>Google</h3> <p>This should change the plus sign icon to google.com</p> </div> <div id="yahoo" class="tab-pane fade"> <h3>Yahoo!</h3> <p>This should change the plus sign icon to yahoo.com</p> </div> </div> </div>
我建议在检查活动选项卡并相应重定向的按钮上添加一个click
事件侦听器:
let selectedForm = document.querySelector("#formSelector"); selectedForm.addEventListener('click', function() { let activeTab = document.querySelector(".nav-tabs li.active"); if (activeTab.textContent.trim() == "Google") { location.href = 'https://google.com' } else { location.href = 'https://yahoo.com' } })
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <div class="container"> <h2>Dynamic Tabs</h2> <p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a.tab-pane class with a unique ID for every tab and wrap them inside a div element with class.tab-content.</p> <ul class="nav nav-tabs"> <li class="active"> <a data-toggle="tab" href="#google">Google</a> </li> <li> <a data-toggle="tab" href="#yahoo">Yahoo.</a> </li> <li class="pull-right"> <a id="formSelector" href="#." target="_blank"><i class="fa fa-plus"></i></a> </li> </ul> <div class="tab-content"> <div id="google" class="tab-pane fade in active"> <h3>Google</h3> <p>This should change the plus sign icon to google.com</p> </div> <div id="yahoo" class="tab-pane fade"> <h3>Yahoo!</h3> <p>This should change the plus sign icon to yahoo.com</p> </div> </div> </div>
正如 Spectric 所说,将支票移动到基于点击选项卡将是理想的。
这是一个替代实现(需要 HTML 和 JS 更改)。
HTML
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
<h2>Dynamic Tabs</h2>
<p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#google" related-url="https://google.com">Google</a>
</li>
<li>
<a data-toggle="tab" href="#yahoo" related-url="https://yahoo.com">Yahoo!</a>
</li>
<li class="pull-right">
<a id="formSelector" href="#!" target="_blank"><i class="fa fa-plus"></i></a>
</li>
</ul>
<div class="tab-content">
<div id="google" class="tab-pane fade in active">
<h3>Google</h3>
<p>This should change the plus sign icon to google.com</p>
</div>
<div id="yahoo" class="tab-pane fade">
<h3>Yahoo!</h3>
<p>This should change the plus sign icon to yahoo.com</p>
</div>
</div>
</div>
Javascript
<script>
const tabClick = document.querySelectorAll(".nav-tabs");
const selectedForm = document.querySelector("#formSelector");
tabClick.forEach((tabEl) => {
tabEl.addEventListener('click', (e) => {
console.log(tabEl);
console.log(e);
selectedForm.setAttribute('href', e.target.getAttribute('related-url'));
});
})
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.