嗨,我正在尝试按钮,每个按钮都处理两个侧栏的可见性。单击颜色按钮将打开颜色栏,然后单击主题按钮将打开主题栏。我通过创建两个Jquery单击函数并添加类来做到这一点。

两个按钮的HTML部分

    <table width="100%" border="0">
        <tr>
            <td class="colorClicked" id="color">Color</td>
            <td class="themeOff" id="theme">Theme</td>
        </tr>
    </table>


这是我的按钮和栏的CSS

    .colorClicked {
    width:50%;
    border-top: 1px solid #818181;
    border-right: 1px solid #818181;
    border-left: 1px solid #818181;
    border-bottom: 0px solid #818181;
    height: 3em;
    text-align: center;
    font-size: 2em;
    font-family: 'Wire One', Gadget, sans-serif;
    cursor:pointer;
    }

.colorOff {
    width:50%;
    border-bottom: 1px solid #818181;
    border-top: 0px solid #818181;
    border-right: 0px solid #818181;
    border-left: 0px solid #818181;
    height: 3em;
    text-align: center;
    font-size: 2em;
    font-family: 'Wire One', Gadget, sans-serif;
    cursor:pointer;
    }

.themeClicked {
    width:50%;
    border-top: 1px solid #818181;
    border-right: 1px solid #818181;
    border-left: 1px solid #818181;
    border-bottom: 0px solid #818181;
    height: 3em;
    text-align: center;
    font-size: 2em;
    font-family: 'Wire One', Gadget, sans-serif;
    cursor:pointer;
    }

.themeOff {
    width:50%;
    border-top: 0px solid #818181;
    border-right: 0px solid #818181;
    border-left: 0px solid #818181;
    border-bottom: 1px solid #818181;
    height: 3em;
    text-align: center;
    font-size: 2em;
    font-family: 'Wire One', Gadget, sans-serif;
    cursor:pointer;
    }


酒吧的CSS

.colorTabOn {
    visibility:visible;
    }

.colorTabHidden {
    position:absolute;
    width: 100%;
    visibility:hidden;
    }

.themeTabOn {
    position:relative;
    width: 100%;
    visibility:visible;
    }

.themeTabHidden {
    top: -31.5em;
    position:relative;
    width: 100%;
    visibility:hidden;
    }


jQuery的

    $('#theme').click(function(){
        $('#colorTab').addClass('colorTabHidden', 500);
        $('#themeTab').addClass('themeTabOn', 500);
        $('#theme').addClass('themeClicked', 500);
        $('#color').addClass('colorOff', 500);
});

$('#color').click(function(){
        $('#colorTab').addClass('colorTabOn', 500);
        $('#themeTab').addClass('themeTabHidden', 500);
        $(this).addClass('colorClicked', 500);
        $('#theme').addClass('themeOff', 500);
});


但是,一旦我单击#theme按钮,该栏的可见性就不会发生。新类仅应用于按钮,并且再次单击#Color按钮后,根本不会发生。

帮助我,也许我是Jquery的初学者。谢谢

最佳答案

好吧,试试这个:

$('#theme').click(function(){
    $('#colorTab').addClass('colorTabHidden').removeClass('colorTabOn');
    $('#themeTab').addClass('themeTabOn').removeClass('themeTabHidden');
    $('#theme').addClass('themeClicked');
    $('#color').addClass('colorOff');
});

$('#color').click(function(){
    $('#colorTab').addClass('colorTabOn').removeClass('colorTabHidden');
    $('#themeTab').addClass('themeTabHidden').removeClass('themeTabOn');
});

09-09 20:53
查看更多