在页面加载时为 LI 元素设置某种样式

Question

我有一个包含以下菜单的页面：

https://jsfiddle.net/dva4zo8t/

根据单击的菜单按钮，颜色会发生变化，我可以在新页面加载时“记住”（设置）颜色，如下所示：

$('[id*="button"]').click(function() {
    $('.topmenu-ul li').removeClass();
    $(this).addClass('topmenu-selected' + $('a', this).attr('class'));
});

我还想在页面加载后为 LI 元素设置样式（不同的背景颜色和红色突出显示的文本）。因此，当我点击“New Appointment”时，在新页面上，LI 元素应如下所示：

所以我基本上想要的是改变 sub li 的类，就像我对主按钮所做的那样，例如：

$('#redbutton').addClass('topmenu-selectedred');
$('.topmenu-tab-appointments').show();

Answer 1

我创建了一个小提琴，可以让按钮在按下时变成背景。

那么当其他人被推时，你会对他们进行“unpush”。

试试这个小提琴。

    $(".topmenu-ul li").click(function() {
      $('li > #topmenu-ul').hide();
      $(this).children("ul").toggle();
    });

    $('[id*="button"]').click(function() {
      $('.topmenu-ul li').removeClass();
      $(this).addClass('topmenu-selected' + $('a', this).attr('class'));
    });

    $('.topmenu-ul li a').click(function() {
      $(this).addClass('topmenu-selectedsub');
    });

* {
  margin: 0;
  padding: 0;
  overflow: auto;
}
html,
body {
  height: 100%
}
header,
footer,
article,
section,
hgroup,
nav,
figure {
  display: block
}
body {
  font-size: 1em;
  color: #fcfcfc;
  background-color: #f8f4eb;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
/*
 *  HTML5 Sections
 */

.header {
  height: 72px;
  margin: 0;
  padding: 0;
  background-color: #fff;
  overflow: hidden;
}
.nav {
  position: relative;
  height: 52px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.main {
  position: relative;
  min-height: calc(100% - 124px);
  background-color: #f8f4eb;
}
.aside {
  float: left;
  width: 195px;
  background-color: #ebddca;
  height: 100%;
}
/*
 *  Top Menu Styles
 */

.topmenu {
  background: -webkit-linear-gradient(#858585, #636263);
  border-top: 1px solid #656565;
  border-bottom: 1px solid #3663ab;
  box-shadow: inset 0 1px 0 #a8a8a8;
  height: 20px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #000
}
.topmenu-header {
  height: 4px;
  background: -webkit-linear-gradient(top, #f5efe4 0%, #d3cdbe 100%);
  border-top: 1px solid #d5cab8
}
.topmenu-subbg {
  padding-left: 5px;
  left: 0;
  width: 100%;
  height: 24px;
  top: 30px;
  background: -webkit-linear-gradient(top, #c8bfb0 0px, #f5efe6 7px);
  border-bottom: 1px solid #d3c7b6
}
.topmenu-ul,
li,
a {
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.topmenu-ul li {
  list-style: none
}
a {
  text-decoration: none;
  color: #000
}
.topmenu-ul > li {
  float: left;
  display: inline;
  list-style: none;
  white-space: nowrap;
  border-right: 1px solid #414141;
  box-shadow: 1px 0 0 0 rgba(165, 162, 165, 1)
}
.topmenu-ul > li a {
  color: #e6e6e6;
  font-size: .7rem;
  line-height: 20px;
  height: 20px;
  display: block;
  padding: 0 20px
}
.topmenu-ul > li a:hover {
  color: #fff
}
.topmenu-ul li ul li a:hover {
  background-color: #f3efe5
}
.topmenu-ul li ul {
  font-size: 0;
  display: none;
  list-style: none;
  position: absolute;
  top: 27px;
  left: -8px;
}
.topmenu-ul li ul li a {
  color: #000;
  line-height: 24px;
  height: 24px;
  font-weight: normal;
}
.topmenu-ul li ul li a:hover {
  color: red;
}
.topmenu-ul li ul li {
  display: inline-block;
  list-style: none;
  white-space: nowrap;
  line-height: 24px;
  height: 24px;
  background: -webkit-linear-gradient(top, #c8bfb0 0px, #f5efe6 7px);
  border-bottom: 1px solid #d3c7b6;
  border-right: 1px solid #d5ccbe
}
.topmenu-ul > [class*=topmenu-selected] > a {
  color: #fff;
}
.topmenu-selectedblue {
  color: #fff;
  font-weight: 700;
  background: -webkit-linear-gradient(#78b1ff, #4881dc)
}
.topmenu-selectedred {
  color: #fff;
  font-weight: 700;
  background: -webkit-linear-gradient(#ff8476, #dc5348)
}
.topmenu-selectedpurple {
  color: #fff;
  font-weight: 700;
  background: -webkit-linear-gradient(#b479ff, #854ade)
}
.topmenu-selectedgreen {
  color: #fff;
  font-weight: 700;
  background: -webkit-linear-gradient(#9dd592, #649f5a)
}
.topmenu-selectedsub {
  background-color: #f3efe5
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
  <div class="topmenu-header"></div>
  <div class="topmenu">
    <ul class="topmenu-ul">
      <li id="bluebutton"><a class="blue">Home</a>

        <ul id="topmenu-ul" class="topmenu-tab-home">
          <li><a href="{{ route('dashboard') }}">Dashboard</a>
          </li>
        </ul>
      </li>
      <li id="redbutton"><a class="red">Appointments</a>

        <ul id="topmenu-ul" class="topmenu-tab-appointments">
          <li><a href="#">Appointments</a>
          </li>
          <li><a id="new" href="#">New Appointment</a>
          </li>
        </ul>
      </li>
      <li id="greenbutton"><a class="green">Contacts</a>

        <ul id="topmenu-ul" class="topmenu-tab-contacts">
          <li><a href="#">Contacts</a>
          </li>
          <li><a href="#">New Contact</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

编辑

不管怎样，如果你想在页面加载完成后，你可以使用document.ready：

$( document ).ready(function() {
  //JUST ADD AN ID TO THE BUTTON AND THIS WILL CHANGE IT´S BACKGROUND AFTER PAGE LOADS
   $("#new").addClass('topmenu-selectedsub');
});

有演示：

$( document ).ready(function() {
  //JUST ADD AN ID TO THE BUTTON AND THIS WILL CHANGE IT´S BACKGROUND AFTER PAGE LOADS
  $('#new').addClass('topmenu-selectedsub');
   $('.topmenu-tab-appointments').show();

});


$(".topmenu-ul li").click(function() {
  $('li > #topmenu-ul').hide();
  $(this).children("ul").toggle();
});

$('[id*="button"]').click(function() {
  $('.topmenu-ul li').removeClass();
  $(this).addClass('topmenu-selected' + $('a', this).attr('class'));
});

$('.topmenu-ul li a').click(function() {
  $(this).addClass('topmenu-selectedsub');
});

* {
  margin: 0;
  padding: 0;
  overflow: auto;
}
html,
body {
  height: 100%
}
header,
footer,
article,
section,
hgroup,
nav,
figure {
  display: block
}
body {
  font-size: 1em;
  color: #fcfcfc;
  background-color: #f8f4eb;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
/*
 *  HTML5 Sections
 */

.header {
  height: 72px;
  margin: 0;
  padding: 0;
  background-color: #fff;
  overflow: hidden;
}
.nav {
  position: relative;
  height: 52px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.main {
  position: relative;
  min-height: calc(100% - 124px);
  background-color: #f8f4eb;
}
.aside {
  float: left;
  width: 195px;
  background-color: #ebddca;
  height: 100%;
}
/*
 *  Top Menu Styles
 */

.topmenu {
  background: -webkit-linear-gradient(#858585, #636263);
  border-top: 1px solid #656565;
  border-bottom: 1px solid #3663ab;
  box-shadow: inset 0 1px 0 #a8a8a8;
  height: 20px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #000
}
.topmenu-header {
  height: 4px;
  background: -webkit-linear-gradient(top, #f5efe4 0%, #d3cdbe 100%);
  border-top: 1px solid #d5cab8
}
.topmenu-subbg {
  padding-left: 5px;
  left: 0;
  width: 100%;
  height: 24px;
  top: 30px;
  background: -webkit-linear-gradient(top, #c8bfb0 0px, #f5efe6 7px);
  border-bottom: 1px solid #d3c7b6
}
.topmenu-ul,
li,
a {
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.topmenu-ul li {
  list-style: none
}
a {
  text-decoration: none;
  color: #000
}
.topmenu-ul > li {
  float: left;
  display: inline;
  list-style: none;
  white-space: nowrap;
  border-right: 1px solid #414141;
  box-shadow: 1px 0 0 0 rgba(165, 162, 165, 1)
}
.topmenu-ul > li a {
  color: #e6e6e6;
  font-size: .7rem;
  line-height: 20px;
  height: 20px;
  display: block;
  padding: 0 20px
}
.topmenu-ul > li a:hover {
  color: #fff
}
.topmenu-ul li ul li a:hover {
  background-color: #f3efe5
}
.topmenu-ul li ul {
  font-size: 0;
  display: none;
  list-style: none;
  position: absolute;
  top: 27px;
  left: -8px;
}
.topmenu-ul li ul li a {
  color: #000;
  line-height: 24px;
  height: 24px;
  font-weight: normal;
}
.topmenu-ul li ul li a:hover {
  color: red;
}
.topmenu-ul li ul li {
  display: inline-block;
  list-style: none;
  white-space: nowrap;
  line-height: 24px;
  height: 24px;
  background: -webkit-linear-gradient(top, #c8bfb0 0px, #f5efe6 7px);
  border-bottom: 1px solid #d3c7b6;
  border-right: 1px solid #d5ccbe
}
.topmenu-ul > [class*=topmenu-selected] > a {
  color: #fff;
}
.topmenu-selectedblue {
  color: #fff;
  font-weight: 700;
  background: -webkit-linear-gradient(#78b1ff, #4881dc)
}
.topmenu-selectedred {
  color: #fff;
  font-weight: 700;
  background: -webkit-linear-gradient(#ff8476, #dc5348)
}
.topmenu-selectedpurple {
  color: #fff;
  font-weight: 700;
  background: -webkit-linear-gradient(#b479ff, #854ade)
}
.topmenu-selectedgreen {
  color: #fff;
  font-weight: 700;
  background: -webkit-linear-gradient(#9dd592, #649f5a)
}
.topmenu-selectedsub {
  background-color: #f3efe5
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
  <div class="topmenu-header"></div>
  <div class="topmenu">
    <ul class="topmenu-ul">
      <li id="bluebutton"><a class="blue">Home</a>

        <ul id="topmenu-ul" class="topmenu-tab-home">
          <li><a href="{{ route('dashboard') }}">Dashboard</a>
          </li>
        </ul>
      </li>
      <li id="redbutton"><a class="red">Appointments</a>

        <ul id="topmenu-ul" class="topmenu-tab-appointments">
          <li><a href="#">Appointments</a>
          </li>
          <li><a id="new" href="#">New Appointment</a>
          </li>
        </ul>
      </li>
      <li id="greenbutton"><a class="green">Contacts</a>

        <ul id="topmenu-ul" class="topmenu-tab-contacts">
          <li><a href="#">Contacts</a>
          </li>
          <li><a href="#">New Contact</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Answer 2

为此，您通常会使用服务器端语言在加载页面时设置一个类（即，在“关于”页面上，将类 about-page 添加到正文，或将类 current 添加到 about 链接）。但要使用 jQuery，您只需要知道页面的 url。

$(document).on('ready', function(){
  
  var $links = $('nav a'),
      
      links_array = [],
      
      current_url = window.location.pathname,
      
      current_link_idx;
  
  // we dont have an actual url so we'll pretend here 
  // for the sake of the snippet/preview
  current_url = '/about';
  
  
  $links.each(function(){
    links_array.push($(this).attr('href'));
  });
  
  current_link_idx = links_array.indexOf(current_url);
  
  $links.eq(current_link_idx).addClass('current-page');
  
});

.current-page {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
  <a href="/etc">Etc</a>
</nav>

显然，如果您有复杂的导航/网址，这不是万无一失的。您需要对current_url 进行一些摆弄，可能会将其拆分为片段。

不过，最好在服务器端完成。

Answer 3

看到这个工作Demo

 $(".topmenu-ul li").click(function() {
        $('li > #topmenu-ul').hide();
        $(this).children("ul").toggle();
        $(".topmenu-ul li").css("background-color","")
        $(this).css("background-color","red")
    });
$('[id*="button"]').click(function() {
        $('.topmenu-ul li').removeClass();
        $(this).addClass('topmenu-selected' + $('a', this).attr('class'));

    });

    $("#topmenu-ul li a").click(function() {


        $("#topmenu-ul li a").css("background-color","")
        $(this).css("background-color","red")
    });

您可以添加您喜欢添加的任何颜色。由你决定，我刚刚向你展示了如何做到这一点