页面加载上的默认活动链接

Question

我的菜单在所有级别上都可以正常工作。但是，我遇到麻烦的一个领域是在页面加载上使链接处于活动状态。我要做的是在页面加载上让第一个链接(inbox)活动。当我单击另一个链接时，将删除活动状态。

我只需要在页面加载上。非常感谢

.navigation {
  width: 100%;
  border-radius: 0 0 5px 5px;
  line-height: 1.2;
  border: 1px solid #ccc;
  height: 154px;
  font-size: 15px;
}
.mainmenu,
.submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mainmenu a {
  display: block;
  /*  background-color: #CCC;*/
  text-decoration: none;
  padding: 10px;
  color: #000;
}
.mainmenu a:active,
.mainmenu a:focus {
  background-color: #ddd;
  color: black;
}
.mainmenu a:hover {
  background-color: #444;
  color: black;
}
.mainmenu li:hover .submenu {
  display: block;
  max-height: 200px;
}
.submenu a {
  background-color: #999;
}
.submenu a:hover {
  background-color: #222;
}
.submenu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-out;
}

<nav class="navigation">
  <ul class="mainmenu">
    <li class="inbox">
      <a href="javascript:void(0)">Inbox</a>
    </li>
    <li>
      <a href="javascript:void(0)">Sent Mail</a>
    </li>
    <li>
      <a href="javascript:void(0)">Received Mail</a>
    </li>
    <li>
      <a href="javascript:void(0)">Junk Mail</a>
    </li>
  </ul>
</nav>

Answer 1

$(document).ready(function() {
  $('.mainmenu li:first-child').addClass('active');
  $('.mainmenu li').hover(function() {
      $('.mainmenu li').removeClass('active');
      $(this).addClass('active');
  });
});

.navigation {
  width: 100%;
  border-radius: 0 0 5px 5px;
  line-height: 1.2;
  border: 1px solid #ccc;
  height: 154px;
  font-size: 15px;
}
.mainmenu,
.submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mainmenu a {
  display: block;
  /*  background-color: #CCC;*/
  text-decoration: none;
  padding: 10px;
  color: #000;
}
.mainmenu a:active,
.mainmenu a:focus {
  background-color: #ddd;
  color: black;
}
.mainmenu a:hover, .active a {
  background-color: #444;
  color: black;
}
.mainmenu li:hover .submenu {
  display: block;
  max-height: 200px;
}
.submenu a {
  background-color: #999;
}
.submenu a:hover,  {
  background-color: #222;
}
.submenu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav class="navigation">
  <ul class="mainmenu">
    <li class="inbox">
      <a href="javascript:void(0)">Inbox</a>
    </li>
    <li>
      <a href="javascript:void(0)">Sent Mail</a>
    </li>
    <li>
      <a href="javascript:void(0)">Received Mail</a>
    </li>
    <li>
      <a href="javascript:void(0)">Junk Mail</a>
    </li>
  </ul>
</nav>

Answer 2

只需将a.firstSelected,添加到您的.mainmenu CSS，然后添加以下JS：

$(document).ready(function() {
  $('.mainmenu li a').click(function(e) {
    $("#first").removeClass("firstSelected");
  });
});

请参阅小提琴

这样做的是，它告诉第一个链接，即"看起来像"一个活动链接，然后单击任何其他链接以删除该样式。您只需将类class="firstSelected"添加到要成为默认活动链接而不是第一个链接的任何链接中。