#javascript #html #css
#javascript #HTML #css
Вопрос:
У меня есть кнопка на моей странице, которая связана с другим веб-сайтом, но у меня также есть несколько кнопок на той же странице. Я бы хотел, чтобы, когда одна кнопка активна, а другие нет, ссылка менялась. Таким образом, каждая ссылка уникальна для этой кнопки, но работает только тогда, когда она активна, а другая нет. Как я мог это сделать?
Комментарии:
1. Что вы подразумеваете под тем, когда он активен и на что он должен измениться?
2. У меня есть кнопки размеров для продукта, и у меня есть код, который сделает один из классов кнопок активным при нажатии на него, а остальные не будут активными. Затем у меня есть кнопка покупки, которая прямо сейчас связана только с одной страницей, но я хочу, например, чтобы при нажатии на размер 8 ссылка на кнопку покупки менялась, а затем, когда, например, кнопка размера 10 нажата и активна, ссылка на кнопку покупки отличается от ссылки на размер 8. Дайте мне знать, если это помогло
3. Я добавил ваш ответ, пожалуйста, попробуйте его на jsfiddle или что-то в этом роде. это работает.
Ответ №1:
В принципе, вам нужно будет обеспечить следующее:
- При нажатии кнопки «Размер» она должна иметь активный цвет фона. Любая другая кнопка, на которую ранее нажимали, больше не будет активной.
- Каждая кнопка размера изменит местоположение ссылки, когда вы нажмете кнопку Покупки.
Идея:
Идея будет заключаться в том, чтобы по умолчанию добавить a .wrap , и вы хотите обернуть <a href> тег вокруг button .
Вы также хотите добавить класс, в моем примере .active . Этот класс также будет добавлен.
Однако, когда вы нажимаете другую кнопку, все это должно быть удалено с предыдущей кнопки.
Итак, по умолчанию, перед добавлением класса И перед тем, как обернуть кнопку покупки ссылкой, вы хотите удалить ее (даже если она не существует, по умолчанию сначала удалите, а затем добавьте).
Попробуй это:
$(document).ready(function(){
$( "#size-8" ).click(function() {
$("purchase").unwrap();
$("#purchase").wrap( "<a href='https://www.w3schools.com' target='_blank'></a>");
$("button").removeClass("active");
$(this).addClass("active");
});
$( "#size-9" ).click(function() {
$("purchase").unwrap();
$("#purchase").wrap( "<a href='https://www.google.com' target='_blank'></a>");
$("button").removeClass("active");
$(this).addClass("active");
});
}); .active {
background-color: red;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="size-8">Size 8</button>
<button id="size-9">Size 9</button>
<br>
<button id="purchase">Purchase</button> Чтобы увидеть результаты, перейдите в JSFiddle и нажмите Выполнить.
Комментарии:
1. Спасибо! Это сработало. Есть ли способ добавить кнопки выше размеров, например 1 и 2. Так что, когда кнопка 1 активна, а размер 9 активен, она переходит в google9.com например, но если кнопка 1 активна, а размер 8 активен, она переходит в google8.com например?
Ответ №2:
Вы имеете в виду что-то вроде этого?
var btns = $(".btn");
btns.on("click", function(e){
this.classList.toggle("active");
});
$(".go").on("click", function(e){
//window.open('http://' $(".active").attr("data-id")); <-- you can uncomment this.
console.log('http://' $(".active").attr("data-id"));
}) .active{
background-color:red;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn" data-id="www.google.com">google</button>
<button class="btn" data-id="www.facebook.com">facebook</button>
<button class="btn" data-id="www.amazon.com">amazon</button>
<button class="go">Go</button> Ответ №3:
Добавьте имя класса «.active» к переключаемой кнопке и добавьте атрибут «data-link» к вашей кнопке
var link = "";
window.onload = function() {
var btns = document.getElementsByClassName("option");
for (var i = 0; i < btns.length; i ) {
btns[i].onclick = function() {
disableAll( btns );
this.classList.toggle("active");
link = this.getAttribute("data-link");
}
}
}
function disableAll( btns )
{
for (var i = 0; i < btns.length; i )
{
if (btns[i].classList.contains("active") )
{
btns[i].classList.remove("active");
}
}
}
function go()
{
if( link != "" )
window.location = link;
} .active {
background-color: black;
color: white;
} <button class="option" data-link="https://google.com">Google</button>
<button class="option" data-link="https://apple.com">Apple</button>
<button onclick="go();">Go</button> Очевидно, что этот фрагмент кода window.location не будет работать, поскольку Google и Apple не разрешают встраивания.