带单选按钮的触发链接

Question

我有单选按钮组，它们与每个组的链接相连

这些是我的链接

<ul class="tabs" persist="true">
    <li><a href="#" rel="view1">1</a></li>
    <li><a href="#" rel="view2">2</a></li>
    <li><a href="#" rel="view3">3</a></li>
    <li><a href="#" rel="view4">4</a></li>
    <li><a href="#" rel="view5">5</a></li>
    <li><a href="#" rel="view6">6</a></li>
    <li><a href="#" rel="view7">7</a></li>
    <li><a href="#" rel="view8">8</a></li>
    <li><a href="#" rel="view9">9</a></li>
    <li><a href="#" rel="view10">10</a></li>
    <li><a href="#" rel="view11">11</a></li>
    <li><a href="#" rel="view12">12</a></li>
    <li><a href="#" rel="view13">13</a></li>
    <li><a href="#" rel="view14">14</a></li>
    <li  onclick="Hidden();"><a href="#" rel="view15">15</a></li>
</ul>

这是我的广播组之一

<div class="tabcontents">
    <div id="view1" class="tabcontent">
        <h2>En  Drama </h2>
            <div class="kolon">
                <p><div id="genc"><span>
                <input name="dizi" type="radio" value="Calikusu" />
                <label for="Çalkuþu">Çalkuþu</label>
                </span></div></p>

                <p><div id="genc"><span>
                <input name="dizi" type="radio" value="GunesiBeklerken" />
                <label for="Güneþi Beklerken">Güneþi Beklerken</label>
                </span></div></p>

                <p><div id="genc"><span>
                <input name="dizi" type="radio" value="Intikam" />
                <label for="Ýntikam">Ýntikam</label>
                </span></div></p>
                </div>
                <div class="kolon">
                <p><div id="genc"><span>
                <input name="dizi" type="radio" value="Karadayi" />
                <label for="Karadayý">Karadayý</label>
                </span></div></p>

                <p><div id="genc"><span>
                <input name="dizi" type="radio" value="Medcezir" />
                <label for="Medcezir">Medcezir</label>
                </span></div></p>

                <p><div id="genc"><span>
                <input name="dizi" type="radio" value="MuhtesemYuzyil" />    
                <label for="Muhteþem Yüzyýl">Muhteþem Yüzyýl</label>
                </span></div></p>
                </div>
            </div>

如果我从其组中选择一个单选按钮，我需要触发我的每个链接

例如；如果我从 view1 中选择一个收音机，我想触发我的 view2 链接。

view3 链接的 view2 收音机等等..

感谢您的帮助！ :)

Answer 1

对于锚点点击动作，我不得不深入挖掘，但我想我设法找到了一个很好的来源： native-click-on-an-anchor-tag

$(document).ready( function() { 
    
    $('input[type="radio"').click(function() {
        //the nearest ancestor div with class "tabcontent" obtained
        var id = $(this).closest('div[class="tabcontent"]').attr("id");
        
        //anchor click    
        $('a[rel="' + id + '"').get(0).click( function() {return false});
        
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="tabs" persist="true">
    <li><a href="new.html" rel="view1">1</a></li>
    <li><a href="#" rel="view2">2</a></li>
    <li><a href="#" rel="view3">3</a></li>
    <li><a href="#" rel="view4">4</a></li>
    <li><a href="#" rel="view5">5</a></li>
    <li><a href="#" rel="view6">6</a></li>
    <li><a href="#" rel="view7">7</a></li>
    <li><a href="#" rel="view8">8</a></li>
    <li><a href="#" rel="view9">9</a></li>
    <li><a href="#" rel="view10">10</a></li>
    <li><a href="#" rel="view11">11</a></li>
    <li><a href="#" rel="view12">12</a></li>
    <li><a href="#" rel="view13">13</a></li>
    <li><a href="#" rel="view14">14</a></li>
    <li  onclick="Hidden();"><a href="#" rel="view15">15</a></li>
</ul>
<div class="tabcontents">
    <div id="view1" class="tabcontent">
        <h2>En  Drama </h2>
            <div class="kolon">
                <p><div id="genc"><span>
                <input name="dizi" type="radio" value="Calikusu" />
                <label for="Çalkuþu">Çalkuþu</label>
                </span></div></p>

                <p><div id="genc"><span>
                <input name="dizi" type="radio" value="GunesiBeklerken" />
                <label for="Güneþi Beklerken">Güneþi Beklerken</label>
                </span></div></p>

                <p><div id="genc"><span>
                <input name="dizi" type="radio" value="Intikam" />
                <label for="Ýntikam">Ýntikam</label>
                </span></div></p>
                </div>
                <div class="kolon">
                <p><div id="genc"><span>
                <input name="dizi" type="radio" value="Karadayi" />
                <label for="Karadayý">Karadayý</label>
                </span></div></p>

                <p><div id="genc"><span>
                <input name="dizi" type="radio" value="Medcezir" />
                <label for="Medcezir">Medcezir</label>
                </span></div></p>

                <p><div id="genc"><span>
                <input name="dizi" type="radio" value="MuhtesemYuzyil" />    
                <label for="Muhteþem Yüzyýl">Muhteþem Yüzyýl</label>
                </span></div></p>
                </div>
            </div>

Answer 2

演示： http://jsfiddle.net/zp2xkawp/11/

我确信精通 javascript 的人可以做得更好，但这可能会奏效（前提是我已经了解您需要发生什么）。在这种情况下，您的链接需要与您的单选按钮匹配的 id，除了 _a 附加到它们：

CSS（掩盖这些是链接的事实）：

a.no-go:link,a.no-go:hover,a.no-go:visited {
    cursor: default;
    color: #333;
    text-decoration: none;
}

HTML（带有no-go 类和附加ID 的链接列表）：

<ul class="tabs" persist="true">
    <li><a href="http://www.example.com" rel="view1" id="view1_a" class="no-go">1</a></li>
    <li><a href="http://www.apple.com" rel="view2" id="view2_a" class="no-go">2</a></li>
    <li><a href="http://www.test.com" rel="view3" id="view3_a" class="no-go">3</a></li>
    <!-- ETC -->
</ul>

<input type="radio" name="test" value="test1" id="view1" /> 
<input type="radio" name="test" value="test2" id="view2" /> 
<input type="radio" name="test" value="test3" id="view3" />

jQuery（停止链接的正常功能，通过引用获取链接）：

<script>
$('.no-go').click(function() {
    return false;
});
$("input[name=test]").click(function(){
    // Get the id name and make a reference to the link
    var GetLink     =   "#"+$(this).attr("id")+"_a";
    // Get the href value from the new reference
    var FetchLink   =   $(GetLink).attr("href");
    // Jump to that location...
    window.location =   FetchLink;
    });
</script>