標簽內的鏈接未將重點放在屬性輸入上

Question

我正在OnePager網站上工作，那里有一個導航菜單。 我想將radio輸入與單擊的a關聯，以便將一些CSS應用於活動的radio 。

就像您將看到的那樣，當我單擊radio時，將應用CSS，但是當我單擊鏈接時，將不應用CSS。 我知道我可以使用JavaScript來做到這一點，但我試圖避免增加我的代碼庫。

該段的第二部分是我想達到的目標，但有a在標簽label 。 radio將被隱藏，因此單擊radio不是可接受的答案。 我怎樣才能讓a標簽和 input標簽激活？

  input[type=radio]:checked + label { color:red; background-color:green; } .working { visibility: hidden; width:0; }

 <html> <body> <div> <h2>Not working with a tag</h2> <div> <input id="a" type="radio" name="menu1" value="a"/> <label for="a"><a href="#">Input 1</a></label> </div> <div> <input id="b" type="radio" name="menu1" value="b"/> <label for="b"><a href="#">Input 2</a></label> </div> </div> <div> <h2>Expected result (without a, it doesn't work)</h2> <div> <input class="working" id="c" type="radio" name="menu2" value="a"/> <label for="c">Input 1</label> </div> <div> <input class="working" id="d" type="radio" name="menu2" value="b"/> <label for="d">Input 2</label> </div> </div> </body> </html>

Answer 1

正確的解決方案在這里，嘗試這個。

<script type="text/javascript">
$(document).ready(function(){
    $('[name=title_format]').click(function()  {
        $('[name=doc-title]').val('Title changed to '+$(this).val());
    });
});
</script>

<style>
input[type=radio]:checked + label {
    color:red;
    background-color:green;
}
.working {
    width:0;
}
</style>

<div>
    <h2>Not working with a tag</h2>
    <div>
        <a href="#">
        <input type="radio" name="title_format" class="title-format" id="title-format-0" value="0" checked="checked">               <label for="title-format-0">Input 1</label>
        </a>
    </div>
    <div>
         <a href="#">
        <input type="radio" name="title_format" class="title-format" id="title-format-1" value="1"> 
        <label for="title-format-1">Input 2</label>
        </a>
    </div>
</div>
<div>
    <h2>Expected result (without a, it doesn't work)</h2>
    <div>
        <input class="working" id="c" type="radio" name="menu2" value="a"/>
        <label for="c">Input 1</label>
    </div>
    <div>
        <input class="working" id="d" type="radio" name="menu2" value="b"/>
        <label for="d">Input 2</label>
    </div>
</div>

Answer 2

這是標簽語法的工作示例： https : //jsfiddle.net/93c3sscs/

如果您正在IE11上進行測試，或者您的客戶使用IE（不確定Edge和其他IE版本），則不能依靠標簽來激活輸入。 IE並未將可點擊功能應用於<label><input></label> ，Microsoft在2015年下半年發布了2個更新，由於將可點擊區域定位在我的小部件精靈上方 5px而完全破壞了我的應用程序。

標簽內的鏈接未將重點放在屬性輸入上

問題描述

2 個解決方案

解決方案1
1 2016-01-27 10:39:35

解決方案2
0 2016-03-02 20:46:12

標簽內的鏈接未將重點放在屬性輸入上

問題描述

2 個解決方案

解決方案1 1 2016-01-27 10:39:35

解決方案2 0 2016-03-02 20:46:12

解決方案1
1 2016-01-27 10:39:35

解決方案2
0 2016-03-02 20:46:12