アクティブボタンを一度選択する方法

Question

IFrame内にハエをほとんどリンクしない場合は、選択したボタンの色を変更して別のボタンを押すまで色を変えてください。

<style> 

.myButton:active 
{ 
position:relative; 
top:1px; 


} 
</style> 


<a class="myButton " href="" target="someFrame">Button1</a> 
<a class="myButton " href="" target="someFrame" >Button 02</a> 
<a class="myButton " href="" target="someFrame">Button 03</a> 
<a class="myButton " href="" target="someFrame">Button 04</a> 
<a class="myButton " " target="someFrame" >Button 05</a> 

Answer 1

ボタンを押したときに呼び出されるJS/jQuery関数があります。 .activeClassは、異なる色の背景を持っている必要があり、

function(){ 
    removeClassFromOtherButtons('activeClass'); 
    this.addClass('activeClass'); 
} 

その後、あなたのCSSで：この関数は、以下の擬似コードのようなものになるだろう。

Answer 2

あなたはJavaScriptをせずに解決策を好む場合、あなたはいくつかの隠されたラジオボタンの策略であることを達成することができます：あなたのCSSファイルで

input[type="radio"][name="toggleRadio"] { 
 
    display: none; 
 
} 
 

 
input[type="radio"][name="toggleRadio"] + a label { 
 
    cursor: pointer; 
 
} 
 

 
input[type="radio"][name="toggleRadio"]:checked + a { 
 
    color: #000; 
 
    text-decoration: none; 
 
}

<input type="radio" name="toggleRadio" id="toggleRadio1"><a href="" target="someFrame"><label class="myButton" for="toggleRadio1">Button1</label></a> 
 
<input type="radio" name="toggleRadio" id="toggleRadio2"><a href="" target="someFrame"><label class="myButton" for="toggleRadio2">Button2</label></a> 
 
<input type="radio" name="toggleRadio" id="toggleRadio3"><a href="" target="someFrame"><label class="myButton" for="toggleRadio3">Button3</label></a> 
 
<input type="radio" name="toggleRadio" id="toggleRadio4"><a href="" target="someFrame"><label class="myButton" for="toggleRadio4">Button4</label></a> 
 
<input type="radio" name="toggleRadio" id="toggleRadio5" checked><a href="" target="someFrame"><label class="myButton" for="toggleRadio5">Button5</label></a>

Answer 3

に追加されます.activeクラスを作成しますボタンを押すと他のボタンから削除されます。ボタンまたはアンカーが押されているときに使用される擬似クラス：

var buttons = document.querySelectorAll('.myButton'); 
buttons.forEach(function(button) { 
    button.addEventListener('click', function() { 
     toggleClass(buttons, this); 
    }); 
}); 

function toggleClass(buttons, buttonToActivate) { 
    buttons.forEach(function(btn) { 
     btn.classList.remove('active'); 
    }); 
    buttonToActivate.classList.add('active'); 
} 

Answer 4

ので、:activeです。

ボタンをアクティブ状態にする場合は、別のクラスでマークする必要があります。

var buttons = document.querySelectorAll('.myButton'); 
 
var activeClassName = 'active'; 
 

 
function activeState(items, activeName) { 
 
    for(var i = 0; i < items.length; i++) { 
 
    if(items[i].classList.contains(activeName)) { 
 
     items[i].classList.remove(activeName); 
 
    } 
 
    } 
 
} 
 

 
for(var i = 0; i < buttons.length; i++) { 
 
    buttons[i].addEventListener('click', function(e){ 
 
    activeState(buttons, activeClassName); 
 
    e.target.classList.add(activeClassName); 
 
    }); 
 
}

.myButton { 
 
    position:relative; 
 
    top:1px; 
 
} 
 

 
.myButton.active { 
 
    background: #f00; 
 
    color: #fff; 
 
    border-color: #f00; 
 
}

<button class="myButton">Test 1</button> 
 
<button class="myButton">Test 2</button> 
 
<button class="myButton">Test 3</button> 
 
<button class="myButton">Test 4</button> 
 
<button class="myButton">Test 5</button> 
 
<button class="myButton">Test 6</button>

私はjavascriptをここにバニラを使用しますが、このコードはES6やjqueryのを使用して書き換えることができ、それははるかにシンプルになります。あなたのための

ここではいくつかの参照リンク：

• https://www.w3schools.com/css/css_pseudo_classes.asp
• https://developer.mozilla.org/docs/Web/API/Element/classList
• https://developer.mozilla.org/docs/Web/API/Element/addEventListener

Answer 5

あなたからアクティブなクラスを削除するには、ボタンのコールのonclick関数に 使用する一般的なクラス名をクリックするとすべてのボタンはアクティブなクラスを特定のボタンに追加します

CSSで

は、あなたが選択したボタンが

.active{ 
background:red;} 

のonClick機能になりたい色を与える

$(".mybutton").on("click",function(event){ addclassactive(event.target); 
} 

function addclassactive (caller){ 
$(".mybutton").removeClass("active"); 
$(caller).addClass("active"): 
}