Question

当您进入该页面时，第一个div #faqBasics应该采用不同的颜色。如果用户点击另外两个div中的一个，则应该使用不同的颜色，其他的muts将采用原始颜色。

如果用户点击某个问题，该问题应采用不同的颜色。但如果他点击其他问题，第一个问题应该是原始颜色。

HTML：

<div id="faqBasics">BASICS</div> | <div id="faqNetworking">NETWORKING</div> | <div id="faqCompression">COMPRESSION</div>
        <br /><br />
        <div class="faqBasics">
            <ul>
                <li>Question?</li>
                    <div class="basicsAnswers">
                        text
                        <br /><br />
                    </div>
                <li>Question?</li>
                    <div class="basicsAnswers">
                        text
                        <br /><br />
                    </div>
                <li>Question?</li>
                    <div class="basicsAnswers">
                        text
                    </div>
            </ul>
        </div>

        <div class="faqNetworking">
            <ul>
                <li>Question?</li>
                    <div class="networkingAnswers">
                        text
                        <br /><br />
                    </div>
                <li>Question?</li>
                    <div class="networkingAnswers"> 
                        text
                        <br /><br />
                    </div>
                <li>Question?</li>
                    <div class="networkingAnswers">
                        text
                    </div>
            </ul>
        </div>

        <div class="faqCompression">
            <ul>
                <li>Question?</li>
                    <div class="compressionAnswers">
                        text
                        <br /><br />
                    </div>
                <li>Question?</li>
                    <div class="compressionAnswers">
                        text 
                        <br /><br />
                    </div>
                <li>Question?</li>
                    <div class="compressionAnswers">
                        text
                        <br /><br />
                    </div>
                <li>Question?</li>
                    <div class="compressionAnswers">
                        text
                    </div>
            </ul>
        </div>

CSS：

#faqBasics, #faqNetworking, #faqCompression {
display:inline;
cursor: pointer;
}

li {
list-style: none;
overflow: hidden;
cursor: pointer;
color:#c8c8c8;
margin-bottom: 15px;
}

li.active {
color: #c8c8c8;
}

JS：

$(document).ready(function() {
$('li').each(function() {
    var tis = $(this), state = false, answer = tis.next('.basicsAnswers, .networkingAnswers, .compressionAnswers').hide().css('height','auto').slideUp();
    tis.click(function() {
        state = !state;
        $('.basicsAnswers, .networkingAnswers, .compressionAnswers').hide();
        $(this).css("color", "#6001ff");
        answer.slideToggle(state);
        tis.toggleClass('active',state);
    });
}
);
$(".faqBasics").show();
$(".faqNetworking,.faqCompression").hide();
$("#faqBasics,#faqNetworking,#faqCompression").click(function(){
    $(this).css("color", "#6001ff");
    $(".faqBasics,.faqNetworking,.faqCompression").hide();
    $("div."+$(this).attr("id")).show();
});
});

我缺少什么想法？

Answer 1

试试这段代码：

jsfiddle

您忘记删除所有li

中的蓝色

 $('li').css('color','black');

用户点击时显示不同颜色的JS

1 个答案: