jquery adds the selected post style to the navigation bar of the current page or the post-jump page

There are two workarounds: one is to directly add a special style to the current page, when the page refreshes or jumps to the next page, the style disappears, and the style is still valid even after the page is refreshed.

Directly on the code:

First case:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<script type="text/javascript" src="templets/js/jquery.js"></script>  <script type="text/javascript">  $(document).ready(function(){      $(".nav a").each(function(){          $(this).click(function(){              $(".nav .hover").removeClass("hover");              $(this).addClass("hover");                return false;//防止页面跳转          });      });  });  </script>    <div class="nav">  <ul>      <li><a href="1.html" class="hover"> 首页</a></li>      <li><a href="2.html"> 个人资料</a></li>      <li><a href="3.html"> 我的好友</a></li>      <li><a href="4.html"> 消息管理</a></li>   </ul>     </div>

Second case:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<script type="text/javascript" src="templets/js/jquery.js"></script>  <script type="text/javascript">  $(document).ready(function(){      $(".nav a").each(function(){          $this = $(this);          if($this[0].href==String(window.location)){              $this.addClass("hover");          }      });  });  </script>    <div class="nav">  <ul>      <li><a href="1.html"> 首页</a></li>      <li><a href="2.html"> 个人资料</a></li>      <li><a href="3.html"> 我的好友</a></li>      <li><a href="4.html"> 消息管理</a></li>   </ul>     </div>