Question

嗨，所以我正在尝试按钮，每个按钮处理两个侧栏的可见性。单击颜色按钮将打开颜色条，然后单击主题按钮将打开主题栏。我这样做是通过创建两个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');
});

再次单击后，div的可见性不会发生变化

1 个答案: