使用单选按钮而不是列表导航的 jQuery 选项卡

Question

我正在按照教程创建一个简单的 jquery 选项卡显示/隐藏内容。

想知道是否有办法重新设计它以使用单选按钮列表而不是列表？

教程在这里： http://www.sohtanaka.com/web-design /simple-tabs-w-css-jquery/

我的 js：

    $(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active").children("input[@type=radio]").click(); //Add "active" class to selected tab
    $(".tab_content").hide(); //Hide all tab content
    var activeTab = "#" + $(this).children("input").attr("value"); //Find the href attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active ID content
    return false;
});

我的 HTML：

    <ul class="tabs">
    <li><input type="radio" name="card" id="one" value="gallery" /> <label for="one">gallery</label></li>
    <li><input type="radio" name="card" id="two" value="submit" /> <label for="two">submit</label></li>
    <li><input type="radio" name="card" id="three" value="resources" /> <label for="three">resources</label></li>
    <li><input type="radio" name="card" id="four" value="contact" /> <label for="four">contact</label></li>
</ul>
<div class="tab_container">
    <div id="gallery" class="tab_content">
        <h2>Gallery</h2>
    </div>
    <div id="submit" class="tab_content">
        <h2>Submit</h2>
    </div>
    <div id="resources" class="tab_content">
        <h2>Resources</h2>
    </div>
    <div id="contact" class="tab_content">
        <h2>Contact</h2>
    </div>
</div>

我能够主动选择列表中的单选按钮，但无法激活实际的 div。

Answer 1

这是解决方案：

<div id="tabs">

<ul class="tabs">

     <li id="tab-1"><label for="tab1">For Sale<input name="tab" type="radio" value="forsale" /></label></li>
     <li id="tab-2"><label for="tab2">Wanted<input name="tab" type="radio" value="wanted" /></label></li>
</ul>

 <div class="tab_container">     

      <div id="forsale" class="tab_content">for sale</div>

      <div id="wanted" class="tab_content">wanted</div>

</div>

jQuery(document).ready(function($) {

                //Default Action
                $(".tab_content").hide(); //Hide all content
                $("ul.tabs li:first").addClass("active").show().find("label input:radio").attr("checked",""); //Activate first tab
                $(".tab_content:first").show(); //Show first tab content

                //On Click Event
                $("ul.tabs li").click(function() {

                    //$("ul.tabs li").removeClass("active"); //Remove any "active" class
                    //$(this).addClass("active"); //Add "active" class to selected tab
                    //$(".tab_content").hide(); //Hide all tab content
                    //var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
                    //$(activeTab).fadeIn(); //Fade in the active content
                    //return false;
                    $("ul.tabs li").removeClass("active"); //Remove any "active" class
                    $("ul.tabs li").find("label input:radio").attr("checked","");
                    $(this).addClass("active").find("label input:radio").attr("checked","checked");
                    $(".tab_content").hide(); //Hide all tab content
                    var activeTab = $(this).find("label input:radio").val(); //Find the href attribute value to identify the active tab + content
                    $('#' + activeTab).fadeIn(); //Fade in the active ID content
                    return false;

                });

            });

Answer 2

在您有此行的地方

var activeTab = $(this).find("value").attr("href");

您可能会将其更改为

var activeTab = "#" + $(this).attr("value");

然后更改，例如

<div id="tab2" class="tab_content">

假设

<div id="gallery" class="tab_content">

单选按钮的值是“gallery”

所有这一切的要点是您从单选按钮上选择的属性中选择什么相应的div的id将是。您可以根据需要调整特定的字符串和属性。

Answer 3

我只是遵循了这个教程，但无法让它工作几个小时，所以我为其他可能也看到这个问题的人做了一个解决方法。

<li><a href="#fragment-7"><span><input type="radio" checked="yes" name="b" id="5">
                <img onclick="this.parentNode.childNodes[0].checked=true" 
                src="http://www.jgiesen.de/javascript/JavaScript/JSBeispiele/gifs/upArrow.gif" style="margin-left:-20px"></span></a></li>

诀窍在于

onclick="this.parentNode.childNodes[0].checked=true"

它返回并选择第一个元素，该元素是 jquery 样式的，对于任何选项卡都是正确的。

通过设置 margin-left:-20px 你可以得到实际单选按钮后面的图片。因此，让你的背景图像要么完全透明，要么在左侧保留一些透明的 25 像素。

然后只需放置正确大小的图像或使用 img 属性宽度/高度

此解决方法不需要弄乱 jquery 代码，它很简单

（另一种选择：
使用这个“旧”jquery 选项卡 - 将选择收音机并且选项卡也会：
http://stilbuero.de/jquery/tabs/#fragment-7 )

Answer 4

$("input[name='card']").change(function () {
    var deger = $(this).val();

    if (deger == "gallery") {
        $("#gallery").show();
        $("#submit").hide();
        $("#resources").hide();
        $("#contact").hide();
    }
    else if (deger == "submit") {
        $("#gallery").hide();
        $("#submit").show();
        $("#resources").hide();
        $("#contact").hide();
    }
    else if (deger == "resources") {
        $("#gallery").hide();
        $("#submit").hide();
        $("#resources").show();
        $("#contact").hide();
    }
    else{
        $("#gallery").hide();
        $("#submit").hide();
        $("#resources").hide();
        $("#contact").show();
    }
});

http://www.aspmvcnet.com/genel/jquery-radio-button -tab.aspx 如果你看这篇文章，你可以到达这个主题的详细信息

Answer 5

在谷歌搜索时，找到这个有趣的话题。经过尝试，我有一个解决方案。使用 click() 来激活无线电速度很慢。有一个更好的方法。使用“val()”来获取radio的值，而不是“attr('value')”。完整代码如下，已测试。

$(document).ready(function() {

//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active").children("input[@type=radio]").attr("checked","checked");
    $(".tab_content").hide(); //Hide all tab content
    var activeTab = "#" + $(this).children("input").val(); //Find the href attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active ID content
    return false;
});

});