將菜單欄中的一項設置爲默認值（首次啓動網頁時）

Question

我對菜單欄有疑問。我想在菜單欄中設置一個項目以在默認情況下激活或對焦，但是我在菜單欄中選擇其他項目時，菜單欄中的默認選定項目仍然保持激活狀態。這是我的html代碼。

.nav_bar nav { 
 
    float:left; 
 
    font-size: 12pt; 
 
    text-align:center; 
 
    width:15%; 
 
    background: #5A9ACB; 
 
    height: auto; 
 
    line-height: 30px; 
 
    margin:0px 0px; 
 
    padding:0px; 
 
} 
 

 
.nav_bar nav ul { 
 
    list-style: none; 
 
    margin: 0 auto; 
 
    padding:0px; 
 
} 
 

 
.nav_bar nav ul li{ 
 
    border-bottom-style:solid; 
 
    border-bottom-width:1px; 
 
    border-bottom-color:#DADFFF; 
 
} 
 

 
.nav_bar nav a:link,.nav_bar nav a:visited{ 
 
    color: #ffffff; 
 
    display: block; 
 
    height: 30px; 
 
    padding: 13px 22px; 
 
    text-decoration: none; 
 
} 
 

 
.nav_bar nav a:hover, .nav_bar nav a:active, .nav_bar nav .active a:link,.nav_bar nav .active a:visited{ 
 
    color: #fff; 
 
    background-color:#226EA8; 
 
    text-shadow: none; 
 
} 
 

 
.nav_bar nav a:focus { 
 
    color: #fff; 
 
    background: #1B6298; 
 
    text-shadow: none; 
 
} 
 

 
.nav_bar nav ul li span{ 
 
    color:#085087; 
 
    font-size:20pt; 
 
    position:absolute; 
 
    left:175px; 
 
} 
 

 
.nav_bar nav a:hover span{ 
 
    color:#ffffff; 
 
} 
 

 
.nav_bar nav li ul a{ 
 
    background: #5A9ACB; 
 
} 
 

 
.nav_bar nav li ul{ 
 
    display:none; 
 
    width:100%; 
 
    height:0px; 
 
    float:left; 
 
    position:relative; 
 
    margin:0px; 
 
    margin-left:190px; 
 
    margin-top:-56px; 
 
    padding:0px; 
 
} 
 

 
.nav_bar nav li:hover ul{ 
 
    display:block; 
 
    
 
}

<div class="nav_bar"> 
 
     <nav> 
 
      <ul> 
 
       <li class="active"><a href="#">Home</a></li> 
 
       <li><a href="#">Event</a></li> 
 
       <li><a href="#">Lost & Found</a></li> 
 
       <li> 
 
        <a href="#">Management<span>&#10097;</span></a> 
 
        <ul> 
 
         <li><a href="#">Student Management</a></li> 
 
         <li><a href="#">Program Management</a></li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 
     </nav> 
 
    </div>

Answer 1

保持你的代碼，並添加這對您的代碼可以幫助你（頭部）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script>$(document).ready(function(){ 
     $('ul li').click(function(e) 
    { 
     $("div nav ul li.active").removeClass("active"); 
    }); 
}); 
</script> 

Answer 2

您正在尋找類似的東西：

function MenuCtrl($) { 
 
    var self = this; 
 
    
 
    self.items = $('#menu li'); 
 
    self.ACTIVE_CLASS = 'is-active'; 
 
    
 
    self.items.click(function(event) { 
 
    event.preventDefault(); 
 
    self.items 
 
     .removeClass(self.ACTIVE_CLASS) 
 
     .filter($(this)) 
 
     .addClass(self.ACTIVE_CLASS) 
 
    ; 
 
    }); 
 
    
 
    self.items.get(0).click(); 
 
    // or, finding on the dom what is the default element 
 
    //self.items.filter('.is-default').click(); 
 
} 
 

 
jQuery(document).ready(MenuCtrl);

ol { margin: 0; padding: 0; } 
 
li {padding: 0 1em; list-style-position: inside; width: 100%; line-height: 2em; transition: 500ms all linear; background: transparent; cursor: pointer; } 
 
.is-active { background-color: lightseagreen; cursor: default; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ol id="menu"> 
 
    <li>Menu Item 1</li> 
 
    <li>Menu Item 2</li> 
 
    <li>Menu Item 3</li> 
 
    <li>Menu Item 4</li> 
 
    <li class="is-default">Menu Item 5</li> 
 
    <li>Menu Item 6</li> 
 
    <li>Menu Item 7</li> 
 
    <li>Menu Item 8</li> 
 
</ol>