我的HTML代码包含一个带有四个标签的列表,最后一个在屏幕外。并且应该仅在单击第2或第3或第4个标签时出现。但...
<div class="tab-container">
<ol>
<input type="radio" id="choice-profile" style="display:none;">
<li class="prolifeLiClass" id="profileLi">
<label class="ProfileLabel" onclick="toggle_set1()" for="choice-profile">Profile</label>
</li>
<input type="radio" id="choice-privacy" style="display:none;">
<li>
<label class="PrivacyLabel" for="choice-privacy" onclick="toggle_set2()">Privacy</label>
</li>
<input type="radio" id="choice-social" style="display:none;">
<li>
<label class="SocialLabel" for="choice-social" onclick="toggle_set3()">Social</label>
</li>
<input type="radio" id="choice-misc" style="display:none;">
<li>
<label class="MiscLabel" for="choice-misc" onclick="toggle_set4()">Misc</label>
</li>
</ol>
</div>
这个css
.tab-container{
width:100%;
height:100%;
background:#EEE;
overflow-x:hidden;
}
ol{
padding:0px;
margin:0px;
list-style-type:none;
width:125%;
height:33px;
}
ol li{
float:left;
width:25%;
text-align:center;
padding:7px;
border-left:solid 1px #CCC;
}
.profileLiClass{
margin-left:0%;
}
.profileLiClass.clicked1{
margin-left:0%;
}
.profileLiClass.clicked23{
margin-left:-15%;
}
.profileLiClass.clicked4{
margin-left:-20%;
}
这个jQuery在单击标签时切换类
$("label.PrivacyLabel").click(onPrivacyLabel);
function onPrivacyLabel()
{
$("#profileLi").toggleClass("clicked23");
}
$("label.SocialLabel").click(onSocialLabel);
function onSocialLabel()
{
$("#profileLi").toggleClass("clicked23");
}
$("label.ProfileLabel").click(onProfileLabel);
function onProfileLabel()
{
$("#profileLi").toggleClass("clicked1");
}
$("label.MiscLabel").click(onMiscLabel);
function onMiscLabel()
{
$("#profileLi").toggleClass("clicked4");
}
但是这段代码不起作用。每当我点击标签时都没有任何反应。 我似乎不知道这段代码有什么问题。 有人可以帮忙吗?