使用單選按鈕而不是列表導航的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> 

我能夠主動選擇列表中的單選按鈕，但不激活實際的分區。

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

假設單選按鈕的值是「圖庫」

所有這一切的關鍵在於，您正在選擇單選按鈕上的屬性選擇對應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像素。

然後只是放置一個圖像與正確的尺寸或使用img屬性寬度/高度

此workarround不要求與jquery代碼很亂，其普通簡單

（另一種替代方法： 使用這個「老」的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如果你看一下這篇文章，您能夠達到這一主題