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

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

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需将a.firstSelected,添加到.mainmenu css并添加以下js：

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

See the fiddle

它的作用是告诉第一个链接是＆＃34;看起来像＆＃34;一个活动链接，然后在单击任何其他链接时，删除该样式。 您只需将类class="firstSelected"添加到您希望成为默认活动链接的任何链接，而不是第一个。