2016-06-30 245 views
0

我包括我的網站的navbar與php,所以我不能使用class =「active」分別指示我的導航欄的活動選項卡。所以我決定使用一個小jQuery代碼在相應的選項卡上添加活動類。但由於某種原因,它不工作,我找不到任何解決方案。爲什麼不addClass工作

這裏是我的jQuery:

<script> 
$(document).ready(function(){ 
    $("#nav_about").addClass("active"); 
}); 
</script> 

這裏是我的導航欄HTML

<nav class="navbar navbar-default navbar-sticky"> 
<div class="container-fluid"> 
<div class="navbar-header"> 
    <a class="navbar-brand hidden-sm" href="#myPage">Logo</a> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
</div> 
<div class="collapse navbar-collapse" id="myNavbar"> 
    <ul class="nav navbar-nav navbar-center"> 
       <li cl ass="active"><a href="index.php">Home</a></li> 
       <li id="nav_about"><a href="about.php">About</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> TEAM <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a href="teachers_panel.php">Teachers</a></li> 
         <li><a href="students_panel.php">Students </a></li> 
        </ul></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Events <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li class="dropdown-header">Upcoming Events</li> 
         <li><a href="sidebar-right.php">1st ACC IT Carnival 2016</a></li> 
         <li class="dropdown-header">Past Events</li> 
         <li><a href="cgc.php">Inter House Cyber Gaming Competition 2015</a></li> 
         <li><a href="tbtt.php">Take Back the Tech </a></li> 
         <li><a href="gbb.php">Google Bus Bangladesh at ACC </a></li> 
         <li><a href="moz.php">Mozcoffee at ACC </a></li> 
         <li><a href="hoc.php">Hour Of Code </a></li> 
         <li><a href="hjfp.php">Club Hangoutat JFP </a></li> 
        </ul></li> 
        <li><a href="u_cons.php">Gallery</a></li> 
        <li><a href="u_cons.php">Get Involved</a></li> 
        <li><a href="contact.php">Contact</a></li> 
       </li> 
      </ul> 
    </div> 
</div> 
</nav> 

編輯:

我已經編輯未結束錯誤$(document).ready(..而不是把之前放$(文件)

+0

缺少右')'的document.ready之後。 – showdev

+0

@showdev謝謝:D這肯定是一個愚蠢的錯誤。有時候你無法察覺到一些明顯的錯誤很有趣。 – Cratobi

+0

你的html代碼也有一些錯誤,請查看下面的代碼。太多'li'結束標籤 –

回答

0

您的HTML和JS代碼的一些錯別字。檢查驗證碼:

$(document).ready(function(){ 
 
    $("#nav_about").addClass("active"); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="navbar navbar-default navbar-sticky"> 
 
<div class="container-fluid"> 
 
<div class="navbar-header"> 
 
    <a class="navbar-brand hidden-sm" href="#myPage">Logo</a> 
 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
    <span class="icon-bar"></span> 
 
    <span class="icon-bar"></span> 
 
    <span class="icon-bar"></span> 
 
    </button> 
 
</div> 
 
<div class="collapse navbar-collapse" id="myNavbar"> 
 
    <ul class="nav navbar-nav navbar-center"> 
 
       <li cl ass="active"><a href="index.php">Home</a></li> 
 
       <li id="nav_about"><a href="about.php">About</a></li> 
 
       <li class="dropdown"> 
 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> TEAM <b class="caret"></b></a> 
 
        <ul class="dropdown-menu"> 
 
         <li><a href="teachers_panel.php">Teachers</a></li> 
 
         <li><a href="students_panel.php">Students </a></li> 
 
        </ul></li> 
 
       <li class="dropdown"> 
 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Events <b class="caret"></b></a> 
 
        <ul class="dropdown-menu"> 
 
         <li class="dropdown-header">Upcoming Events</li> 
 
         <li><a href="sidebar-right.php">1st ACC IT Carnival 2016</a></li> 
 
         <li class="dropdown-header">Past Events</li> 
 
         <li><a href="cgc.php">Inter House Cyber Gaming Competition 2015</a></li> 
 
         <li><a href="tbtt.php">Take Back the Tech </a></li> 
 
         <li><a href="gbb.php">Google Bus Bangladesh at ACC </a></li> 
 
         <li><a href="moz.php">Mozcoffee at ACC </a></li> 
 
         <li><a href="hoc.php">Hour Of Code </a></li> 
 
         <li><a href="hjfp.php">Club Hangoutat JFP </a></li> 
 
        </ul></li> 
 
       <li><a href="u_cons.php">Gallery</a></li> 
 
       <li><a href="u_cons.php">Get Involved</a></li> 
 
       <li><a href="contact.php">Contact</a></li>      
 
      </ul> 
 
    </div> 
 
</div> 
 
</nav>

0

你需要$(document)而不是document jQuery中

$(document).ready(function(){ 
 
    $("#nav_about").addClass("active"); 
 
});
.active { 
 
    border: 1px solid red; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script> 
 

 
</script> 
 
And here is my navbar html: 
 

 
<nav class="navbar navbar-default navbar-sticky"> 
 
<div class="container-fluid"> 
 
<div class="navbar-header"> 
 
    <a class="navbar-brand hidden-sm" href="#myPage">Logo</a> 
 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
    <span class="icon-bar"></span> 
 
    <span class="icon-bar"></span> 
 
    <span class="icon-bar"></span> 
 
    </button> 
 
</div> 
 
<div class="collapse navbar-collapse" id="myNavbar"> 
 
    <ul class="nav navbar-nav navbar-center"> 
 
       <li cl ass="active"><a href="index.php">Home</a></li> 
 
       <li class="active" id="nav_about"><a href="about.php">About</a></li> 
 
       <li class="dropdown"> 
 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> TEAM <b class="caret"></b></a> 
 
        <ul class="dropdown-menu"> 
 
         <li><a href="teachers_panel.php">Teachers</a></li> 
 
         <li><a href="students_panel.php">Students </a></li> 
 
        </ul></li> 
 
       <li class="dropdown"> 
 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Events <b class="caret"></b></a> 
 
        <ul class="dropdown-menu"> 
 
         <li class="dropdown-header">Upcoming Events</li> 
 
         <li><a href="sidebar-right.php">1st ACC IT Carnival 2016</a></li> 
 
         <li class="dropdown-header">Past Events</li> 
 
         <li><a href="cgc.php">Inter House Cyber Gaming Competition 2015</a></li> 
 
         <li><a href="tbtt.php">Take Back the Tech </a></li> 
 
         <li><a href="gbb.php">Google Bus Bangladesh at ACC </a></li> 
 
         <li><a href="moz.php">Mozcoffee at ACC </a></li> 
 
         <li><a href="hoc.php">Hour Of Code </a></li> 
 
         <li><a href="hjfp.php">Club Hangoutat JFP </a></li> 
 
        </ul></li> 
 
        <li><a href="u_cons.php">Gallery</a></li> 
 
        <li><a href="u_cons.php">Get Involved</a></li> 
 
        <li><a href="contact.php">Contact</a></li> 
 
       </li> 
 
      </ul> 
 
    </div> 
 
</div> 
 
</nav>

+0

謝謝,它在$並以$(document)(正如$ showdev指出的)結束後正常工作。 – Cratobi