2016-06-30 2 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

:このコードをチェックしてください。 – showdev

+0

@showdevありがとうございました:それは確かに愚かな間違いでした。時には明白な間違いを検出できないことが面白いです。 – Cratobi

+0

また、あなたのHTMLコードにいくつか間違いがあります。以下の私のコードをチェックしてください。 「li」クローズタグが多すぎます –

答えて

0

を必要としています。 document.ready後に `)`閉じ欠落

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

あなたは、あなたのHTMLとJSコード内のいくつかの誤植を持っている$(document)の代わりにjQueryでdocument

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

ありがとうございます、$を入れて、$(ドキュメント)($ showdevが指摘しているように)を終了してからうまくいきました。 – Cratobi

関連する問題