点击更改课程

时间:2015-08-15 20:45:31

标签: jquery html css class toggle

我的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");
    }

但是这段代码不起作用。每当我点击标签时都没有任何反应。 我似乎不知道这段代码有什么问题。 有人可以帮忙吗?

0 个答案:

没有答案
相关问题