在頁面加載時，為LI元素設置某種樣式

Question

我有一個帶有以下菜單的頁面：

https://jsfiddle.net/dva4zo8t/

根據單擊的菜單按鈕，顏色會發生變化，我可以“記住”（設置）新頁面加載時的顏色，如下所示：

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

頁面加載后，我還想為LI元素設置樣式（不同的背景顏色和紅色突出顯示的文本）。 因此，當我在新頁面上單擊“新約會”時，LI元素應如下所示：

因此，我基本上想要像更改主按鈕一樣更改sub li的類，例如：

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

Answer 1

我創建了一個小提琴，當按下按鈕時，它將使按鈕變成其背景。

那么當其他人被推動時，您將對他們進行“取消推送”。

試試這個小提琴。

  $(".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頁面上，將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> 

顯然，如果您具有復雜的導航/ URL，那么這不是安全的。 您需要對current_url進行一些擺弄，也許將其拆分為多個片段。

盡管如此，最好還是在服務器端完成。

Answer 3

觀看此工作演示

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

您可以添加任何您想要添加的顏色 。 由您決定，我剛剛向您展示了如何操作