Javascript 未在选项卡中加载内容
您好,我的jquery选项卡有点问题,出于某种原因,它会加载第一个选项卡内容,但当我选择另一个选项卡时,内容不会显示。当我尝试返回到第一个选项卡时,它也不会加载 这是htmlJavascript 未在选项卡中加载内容,javascript,jquery,html,css,ajax,Javascript,Jquery,Html,Css,Ajax,您好,我的jquery选项卡有点问题,出于某种原因,它会加载第一个选项卡内容,但当我选择另一个选项卡时,内容不会显示。当我尝试返回到第一个选项卡时,它也不会加载 这是html JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) <div id="content"> <div id="tabsX"> <div id="tabContent"> <ul class="tabs"> &
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<div id="content">
<div id="tabsX">
<div id="tabContent">
<ul class="tabs">
<li><a id="all" href="#all" class="all">All</a></li>
<li><a id="free" href="#free" class="free">Free</a></li>
<li><a id="paid" href="#paid" class="paid">Paid</a></li>
<li><a id="completed" href="#completed" class="completed">Completed</a></li>
<div id="filter"><select name="filterQuest">
<option>Name</option>
<option>Payout</option>
<option>Difficulty</option>
</select></div>
</ul>
<div class="tab_container">
<div id="all" class="tab_content">
asddd
</div>
<div id="free" class="tab_content">
<!--Content-->adadada
</div>
<div id="paid" class="tab_content">
<!--Content-->adad
</div>
<div id="completed" class="tab_content">
<!--Content-->adsasd
</div>
</div><!--- end tab_container--->
</div><!---end tab content--->
<br class="clear" />
</div><!--- end tabsX--->
<div id="tournament"></div><!--- end tournament--->
</div><!--- end content--->
首先,HTML ID属性必须是唯一的。在您的示例中,有几个元素具有相同的ID,这是错误的(对于XHTML验证和JS都是错误的,这会导致错误) 第二,当您单击链接时,是否使用调试器查看$(this)包含的内容
最后,“类转换”的东西有用吗?我们需要您提供更多信息:-)您的控制台中是否收到任何js错误?此外,div不应放在无序列表中。感谢您的回复,我正在尝试调试代码以找到$的值(此值),但我遇到了问题,我在internet explorer中尝试过,但它似乎不起作用,你能给我一些关于如何调试它以找到$(this)值的建议吗。谢谢,我成功地修复了它,我从每个列表中删除了id=“all”,它成功了,非常感谢所有的帮助help@AlistairWise:您可以使用Firebug上的断点进行调试。在谷歌上查找:)
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(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"); //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;
});
});
</script>
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
@charset "utf-8";
/* CSS Document */
ul.tabs {
padding: 0;
float: left;
list-style: none;
height: 56px;
width: 100%;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
border-bottom-width: 1px;
border-bottom-style: ridge;
border-bottom-color: #999;
position:relative;
}
#tabsX {
width: 800px;
padding-left: 20px;
float: left;
}
#tabsX .clear {
clear: both;
}
ul.tabs li {
float: left;
padding: 0;
height: 55px;
line-height: 53px;
margin-bottom: -1px;
overflow: hidden;
position: relative;
margin-top: 0px;
margin-right: 20px;
margin-left: 0;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
}
ul.tabs li a {
text-decoration: none;
color: #333;
display: block;
font-size: 1.2em;
padding: 0 20px;
outline: none;
position:relative;
}
/*ul.tabs li a:hover {
color: #9C3;
text-transform: none;
}*/
html ul.tabs li.active a.all,
ul.tabs li a.all:hover {
color: #999;
text-transform: none;
border-bottom-width: thick;
border-bottom-style: ridge;
border-bottom-color: #999;
}
html ul.tabs li.active a.free,
ul.tabs li a.free:hover {
color: #7ED200;
text-transform: none;
border-bottom-width: thick;
border-bottom-style: ridge;
border-bottom-color: #7ED200;
}
html ul.tabs li.active a.paid,
ul.tabs li a.paid:hover {
color: #CB0C01;
text-transform: none;
border-bottom-width: thick;
border-bottom-style: ridge;
border-bottom-color: #E40D01;
}
html ul.tabs li.active a.completed,
ul.tabs li a.completed:hover {
color: #06C;
text-transform: none;
border-bottom-width: thick;
border-bottom-style: ridge;
border-bottom-color: #06C;
}
.tab_container {
clear: both;
/*float: left;*/
width: 100%;
border-right: 1px ridge #999;
margin-bottom: 20px;
min-height: 930px;
}
.tab_content {
padding: 20px;
}
.tab_content img {
float: left;
margin: 0 20px 20px 0;
border: 1px solid #ddd;
padding: 5px;
}
#tabContent #filter {
float: right;
margin-top: 17px;
margin-right: 50px;
}