再次单击后 div 的可见性没有改变

Question

嗨，我正在尝试按钮，每个按钮都处理两个侧栏的可见性。点击Color按钮会打开Color Bar，点击theme按钮会打开Theme Bar。我通过创建两个 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 的初学者。谢谢你

Answer 1

好吧，试试这个：

$('#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');
});