jQuery tabs using radio buttons instead of list navigation

I'm following a tutorial to create a simple jquery tabs show/hide content.

Wondering if there's a way to re-engineer it to use a list of radio buttons instead of a list?

Tutorial here: http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/

My 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(); /开发者_StackOverflow/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;
});

My 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>

I'm able to actively select the radio button within the list, but not activate the actual div.

Here is the solution:

<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;

                });

            });

Where you have this line

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

You would probably change it to

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

and then change, for example

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

to

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

Assuming the value of the radio button is "gallery"

The point of all this being that you are selecting from an attribute on the radio button that is selected what the id of the corresponding div would be. You can adjust the particular string and attributes as needed.

i just followed this tut and could not get it working for hours so i made a workaround for others that might see this too.

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

the trick lies herein

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

it goes back and than selects the first element which is in jquery style for any tab correct.

with setting margin-left:-20px you get the pic behind the actual radio button. so make your background image either complete transparent or save some 25 px on the left which are transparent.

then just place a image with the correct size or using the img attributes width/height

this workarround does not require to mess with jquery-code, its plain simple

( Another alternative : use this "older" jquery tabs - the radio will be selected and the tab also: http://stilbuero.de/jquery/tabs/#fragment-7 )

$("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 if you look this article, you can reach details of this subject

While googling, find this interesting topic. After try, I have a solution. Use click() to active the radio is slow. There is a better way.Use "val()" to get value of radio, instead of "attr('value')". Full code below, tested.

$(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;
});

});