Question

我用php包含了我网站的导航栏，因此我无法使用 class =“active”分别指示导航栏的有效标签。所以我决定使用一些小的jquery代码在相应的选项卡上添加 active 类。但由于某种原因，它不起作用，我找不到任何解决方案。

这是我的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>

编辑：

我编辑了错误，这些错误没有结束 $（文件）.ready（.. 而不是 $ （文件）< /强>

Answer 1

在jQuery中需要$(document)而不是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>

Answer 2

您的HTML和JS代码中存在一些拼写错误。检查此代码：

CREATE TABLE TABLE_A (`Room_Id` int, 
                      `Status` varchar(55), 
                      `Inspection_Date` Date
                     );

INSERT INTO TABLE_A (Room_Id, Status, Inspection_Date)
VALUES  (1, 'vacant',      '5/15/2015'),
        (2, 'occupied',    '5/21/2015'),
        (2, 'vacant',      '1/19/2016'),
        (1, 'occupied',   '12/16/2015'),
        (4, 'vacant',      '3/25/2016'),
        (3, 'vacant',      '8/27/2015'),
        (1, 'vacant',      '4/17/2016'),
        (3, 'vacant',     '12/12/2015'),
        (3, 'vacant',      '3/22/2016'),
        (4, 'occupied',       '2/2/2015'),
        (4, 'vacant',      '3/24/2015');

CREATE TABLE TABLE_B (`Room_Id` int, 
                      `Status` varchar(55),         
                      `Inspection_Date` Date
                     );

INSERT INTO TABLE_B (Room_Id, Status, Inspection_Date)
VALUES
        (1, 'vacant',      '5/15/2015'),
        (2, 'occupied',    '5/21/2015'),
        (2, 'vacant',      '1/19/2016'),
        (1, 'vacant',      '12/16/2015'),
        (1, 'vacant',      '4/17/2016'),;

$(document).ready(function(){
  $("#nav_about").addClass("active");
});

为什么addClass不起作用

2 个答案: