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

谷歌搜索时，找到这个有趣的话题。尝试后，我有一个解决方案。使用click（）激活收音机很慢。有一种更好的方法。使用“val（）”来获取无线电的值，而不是“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;
});

});

Answer 4

我只是跟着这个啧啧而无法让它工作几个小时，所以我为其他可能会看到它的人做了一个解决方法。

<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 px透明。

然后只需放置具有正确尺寸的图像或使用img属性width / height

这个workarround不需要搞乱jquery-code，简单的简单

（另一种选择：使用这个“较旧的”jquery选项卡 - 将选择无线电，选项卡也是： http://stilbuero.de/jquery/tabs/#fragment-7）

Answer 5

$("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如果您查看此文章，则可以了解此主题的详细信息

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

5 个答案: