JQuery設置CSS顯示：none應該是塊

我正在尋找加載文本文件到內容div當用戶選擇一個選項卡，內容被插入到HTML文件，但內容div被設置爲style="display: none;。JQuery設置CSS顯示：none應該是塊

無論何時選中相關選項卡並將所有其他內容div設置爲隱藏，我如何才能將它設置爲block？

JQuery的：

$(document).ready(function() { 
    function resetTabs() { 
    $("#content > div").hide(); 
    $("#tabs a").attr("id", ""); 
    } 

    var myUrl = window.location.href; 
    var myUrlTab = myUrl.substring(myUrl.indexOf("#")); 
    var myUrlTabName = myUrlTab.substring(0, 4); 

    (function() { 
    $("#content > div").hide(); 
    $("#tabs li:first a").attr("id", "current"); 
    $("#content > div:first").fadeIn(); 

    $("#tabs a").on("click", function (e) { 
     e.preventDefault(); 
     if ($(this).attr("id") == "current") { 
     return 
     } 
     else { 
     resetTabs(); 
     $(this).attr("id", "current"); 
     $($(this).attr('name')).fadeIn(); 
     } 
    }); 

    for (i = 1; i <= $("#tabs li").length; i++) { 
     if (myUrlTab == myUrlTabName + i) { 
     resetTabs(); 
     $("a[name='" + myUrlTab + "']").attr("id", "current"); 
     $(myUrlTab).fadeIn(); 
     } 
    } 
    })() 
}); 


$(document).ready(function() { 
    $("#tabContent1").load("test.txt"); 
    $('a[name="#tab2"]').click(function() { 
    $("#tabContent2").load("test.txt"); 
    }); 
});

HTML：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="CSS/common.css" /> 
    <script src="JS/common.js"></script> 
    <title></title> 
    </head> 
    <body> 
    <nav> 
     <ul id="tabs"> 
     <li><a href="#" id="tab1" name="#tab1">Home</a></li> 
     <li><a href="#" id="tab2" name="#tab2">History</a></li> 
     <li><a href="#" id="tab3" name="#tab3">Specifications</a></li> 
     <li><a href="#" id="tab4" name="#tab4">Gallery</a></li>  
     </ul> 
    </nav> 
    <div id="content"> 
     <div id="tabContent1"></div> 
     <div id="tabContent2"></div> 
     <div id="tabContent3"></div> 
     <div id="tabContent4"></div> 
    </div> 
    </body> 
</html>

我還發現了以下錯誤：

Uncaught TypeError: Object #tabContent2 has no method 'fadeIn' 
i 
st.event.dispatch 
st.event.add.y.handle

來源

2013-02-11 Colin747

ü可以放在一個jfiddle – 2013-02-11 15:10:13

'$（$（本）.attr（ '名'））淡入（）;'應該是'$（本）.attr（ '名'）淡入。（）;' – KBN 2013-02-11 15:12:14

@xFortyFourx我仍然有問題。 – Colin747 2013-02-11 15:14:03

得到它的工作使用@Jaco科斯特的jsfiddle及以下的jQuery的組合。

$(document).ready(function() { 
    $("#tabContent1").load("test.txt"); 

    $('a[name="#tabContent1"]').click(function() { 
    $("#tab2").removeClass('activeTab'); 
    $("#tab3").removeClass('activeTab'); 
    $("#tab4").removeClass('activeTab'); 
    $(this).addClass('activeTab'); 
    $("#tabContent1").load("test.txt"); 
    $("#tabContent1").show(); 
    $("#tabContent2").hide(); 
    $("#tabContent3").hide(); 
    $("#tabContent4").hide(); 
    }); 

    $('a[name="#tabContent2"]').click(function() { 
    $("#tab1").removeClass('activeTab'); 
    $("#tab3").removeClass('activeTab'); 
    $("#tab4").removeClass('activeTab'); 
    $(this).addClass('activeTab'); 
    $("#tabContent2").load("test2.txt"); 
    $("#tabContent2").show(); 
    $("#tabContent1").hide(); 
    $("#tabContent3").hide(); 
    $("#tabContent4").hide(); 
    }); 

    $('a[name="#tabContent3"]').click(function() { 
    $("#tab1").removeClass('activeTab'); 
    $("#tab2").removeClass('activeTab'); 
    $("#tab4").removeClass('activeTab'); 
    $(this).addClass('activeTab'); 
    $("#tabContent3").load("test3.txt"); 
    $("#tabContent3").show(); 
    $("#tabContent1").hide(); 
    $("#tabContent2").hide(); 
    $("#tabContent4").hide(); 
    }); 

    $('a[name="#tabContent4"]').click(function() { 
    $("#tab1").removeClass('activeTab'); 
    $("#tab2").removeClass('activeTab'); 
    $("#tab3").removeClass('activeTab'); 
    $(this).addClass('activeTab'); 
    $("#tabContent4").load("test4.txt"); 
    $("#tabContent4").show(); 
    $("#tabContent1").hide(); 
    $("#tabContent2").hide(); 
    $("#tabContent3").hide(); 
    }); 
});

來源

2013-02-11 22:15:38 Colin747

如何tabContent和標籤連接？試着這樣的標籤的名稱設置爲實際內容的ID：

<nav> 
    <ul id="tabs"> 
    <li><a href="#" id="tab1" name="#tabContent1">Home</a></li> 
    <li><a href="#" id="tab2" name="#tabContent2">History</a></li> 
    <li><a href="#" id="tab3" name="#tabContent3">Specifications</a></li> 
    <li><a href="#" id="tab4" name="#tabContent4">Gallery</a></li>  
    </ul> 
</nav> 
<div id="content"> 
    <div id="tabContent1"></div> 
    <div id="tabContent2"></div> 
    <div id="tabContent3"></div> 
    <div id="tabContent4"></div> 
</div>

這樣你的函數$（$（本）.attr（「名」））淡入（）;應該更好一點。

來源

2013-02-11 15:27:51

我已經這樣做了，但我仍然有內容div上的CSS設置爲none的相同問題。 – Colin747 2013-02-11 15:35:28

請參閱編輯錯誤。 – Colin747 2013-02-11 15:46:25

我已將您的代碼添加到JSFiddle中，並刪除了此特定問題的所有不需要的代碼。這工作。 http://jsfiddle.net/XGaYR/ – 2013-02-11 15:46:53

嘗試一下本作的淡入

var title = $('#current').attr('name'); 
$(title).fadeIn()

，而不是

$($(this).attr('name')).fadeIn();

（哎呀檢查編輯）

來源

2013-02-11 15:58:05

我仍然收到相同的錯誤。 – Colin747 2013-02-11 18:12:00

在什麼瀏覽器？在firefox中，進入你的頁面，點擊一個標籤，在控制檯類型=> var title = $（'＃current'）。attr（'name'）; $（title）.fadeIn（），它淡入相應的div – 2013-02-11 20:58:25

JQuery設置CSS顯示：none應該是塊

回答

相關問題