javascript - 在页面加载时将特定样式设置为 LI 元素

标签 javascript jquery css html

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

https://jsfiddle.net/dva4zo8t/

根据单击哪个菜单按钮，颜色会发生变化，我可以在新页面加载时“记住”(设置)颜色，如下所示:

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

我还想在页面加载后为 LI 元素设置样式(不同的背景颜色和红色突出显示的文本)。因此，当我单击“新建约会”时，在新页面上，LI 元素应如下所示:

example

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

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

最佳答案

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

然后当其他人被推时，你会让他们“取消推”。

试试这个 fiddle 。

    $(".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>

关于javascript - 在页面加载时将特定样式设置为 LI 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35102104/

上一篇：javascript - 显示和隐藏一个 div 并在其他 div 之后插入

下一篇：javascript - 如何使用 javascript 函数重用 HTML 代码块？

相关文章：

javascript - 拉斐尔JS :Text around path not visible

javascript - 如何使用 Moment 解析没有偏移的时间字符串？

javascript - 在同一行上选择单选按钮时更改表格单元格中的字体颜色

jquery - 如何将 jQuery 自动完成与 Node.js 结合使用

jquery - 定位选择器具有在不同屏幕尺寸上缩放的正确尺寸

javascript - jquery animate ul 按列表项

javascript - bootstrap 轮播不同尺寸

javascript - 自页面加载后的 JQuery Clock/Timer(即使用户更改其计算机上的时间)

html - 使类不可见

css - 元素层阻止鼠标悬停以显示标题

©2024 IT工具网  联系我们