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

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令'）。触发器（ '点击'），触发了你的点击处理程序。你希望这在触发页面加载而不是另一个h3的点击。将其保留在文档就绪功能中会导致它在页面加载时触发。你的选择器也是错的。 H3有一个'订单'的ID。你真的不应该给这些类似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>