如何在点击时进行颜色更改，以选择一个按钮进行加载

Question

我单击时有颜色变化，当按下另一个按钮时颜色会变化，然后又恢复正常。 但是我想知道如何使一个按钮在页面加载时突出显示，然后在按下另一个按钮时变为非突出显示，并返回到正常设置。

我的脚本可以运行，但不能突出显示页面加载时的其中一项切换。 我希望我的帐户按钮在页面加载时突出显示。 我已经尝试过但是很不幸。 请帮忙！

 <script> $(document).ready(function() { $('.sidebar h3').on('click', function() { $('.sidebar h3').css('color', 'black'); $(this).css('color', 'red'); $('h3#order').trigger('click'); }); }); </script> 

 <div class="sidebar"> <a id="order" class="header" href="#" onclick="toggleVisibility('Order');"><h3 id="orderr">Orders</h3></a> <div id="Order" style="display: none;"></div> <a id="restt" class ="header"href="#" onclick="toggleVisibility('Rest');"><h3>Your Restaurants</h3></a> <div id="Rest" style="display: none;"><div> <!-- account --> <a id="francc" name="account" class ="header" href="#" onclick="toggleVisibility('Franc');"><h3 id="open">Your Account</h3></a> <div id="Franc" style="display: none;"></div> 

Answer 1

首先，将$（'h3＃order'）。trigger（'click'）触发器带出点击处理程序。 您希望它在页面加载时触发，而不是在单击另一个h3时触发。 将其保留在文档就绪功能中将导致它在页面加载时触发。 而且您的选择器是错误的。 H3的ID为“ orderer”。 您真的不应该提供类似ID的所有内容，也不需要所有内容都具有ID。

<script>
        $(document).ready(function() { 
            $('.sidebar h3').on('click', function() {
                $('.sidebar h3').css('color', 'black');
                $(this).css('color', 'red');
            });

            $('h3#orderr').trigger('click');
        });
    </script>