Вкладки 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

$("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 3

Во время поиска в Google, найдите эту интересную тему. После попытки у меня есть решение. Используйте 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;
});

});

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 пикселей слева, которые будут прозрачными.

затем просто поместите изображение с правильным размером или используя атрибуты img ширина / высота

этот обходной путь не требует возиться с jquery-кодом, просто

(Другая альтернатива: используйте эту «старую» вкладку jquery - радио будет выбрано и вкладка также: http://stilbuero.de/jquery/tabs/#fragment-7)

Answer 5

Где у вас эта строка

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. При необходимости вы можете настроить конкретную строку и атрибуты.