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 radio等等..

感谢您的帮助！：）

Answer 1

DEMO： 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>

Answer 2

对于锚定点击动作，我不得不深入挖掘，但我认为我设法找到了一个很好的来源： 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>

消防链接与单选按钮

2 个答案: