Question

我在我的网站上使用了一个jquery插件来设计垂直侧边菜单。顶部导航栏中的注销锚链接和菜单中的测试链接无效。我是jquery的新手，我发现诀窍在于html文件中jquery的最后一部分。但找不到原因。请解释jquery以及如何使链接工作。

<html>
<head lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

  <!-- FontAwesome -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

  <!-- Twitter Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<link rel="stylesheet" href="bootstrap-vertical-menu.css">

</head>
<body>

<nav class="navbar navbar-inverse ">
  <div class="container-fluid">
    <div class="navbar-header">
      <p class="navbar-text"><b style = "color:white">tnceo.com</b></p>
      <p class="navbar-text" style = "color:white">Welcome</p>
      <?php
echo '<p class="navbar-text" style = "color:black;background-color:orange;">'.$vsname.'</p>';
?>
    </div>
    <div>
      <ul class="nav navbar-nav navbar-right">
        <li><a style = "font-weight:bold;color:yellow;" href="http://www.google.com"><span class="glyphicon glyphicon-log-out"></span>Logout</b></a></li>
      </ul>
    </div>
      </nav>

<div class="col-sm-1 col-md-1 col-lg-2 col-xl-2 affix-content">
<div class="container">
</div>
  <nav class="navbar navbar-vertical-left">
    <ul class="nav navbar-nav">
      <li>
        <a href = "backup.html">
          <i class="fa fa-fw fa-lg fa-star"></i> 
          <span>Menu 1</span>
        </a>
      </li>
      <li>
        <a href>
          <i class="fa fa-fw fa-lg fa-font"></i> 
          <span>Menu 2 </span>
        </a>
      </li>
      <li>
        <a href>
          <i class="fa fa-fw fa-lg fa-rocket"></i> 
          <span>Menu 3</span>
        </a>
      </li>
      <li>
        <a href>
          <i class="fa fa-fw fa-lg fa-cog"></i> 
          <span>Menu 4</span>
        </a>
      </li>
       </ul>
  </nav>
  </div>

  <div class="col-sm-11 col-md-11 col-lg-10 col-xl-10 affix-content">
    <div class="page-header">
    <h3><span class="glyphicon glyphicon-th-list"></span> Please read the instructions Carefully</h3>
    <h6>Use the administration menu on the left side</h6>
</div>

<div class="panel panel-primary">

        <!-- Default panel contents -->

        <div class="panel-heading">Basic Details</div>

        <div class="panel-body">

            <p>For any Changes in the following Basic details call the concerned DEO Office</p>

        </div>

        <!-- List group -->

        <div class="list-group">
   <?php
   echo '<li class="list-group-item">Revenue Code<span class="badge">'.$vrev.'</span></li>';

   echo '<li class="list-group-item">District Code<span class="badge">'.$vdist.'</span></li>';

   echo '<li class="list-group-item">School Name<span class="badge">'.$vsname.'</span></li>';

   echo '<li class="list-group-item">District Name<span class="badge">'.$vdname.'</span></li>';
   echo '<li class="list-group-item">School Status<span class="badge">'.$vstatus.'</span></li>';?>
   </div>
 </div>


<p>Instruction 1</p>
<p>Instruction 1</p>
<p>Instruction 1</p>

</div>
</div>
</div>

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
    $(document).ready(function() {
      $('a').click(function(event) {
        $('a').removeClass('selected');
        $(this).addClass('selected');
        event.preventDefault();
      })
    });
  </script>

</body>
</html>

Answer 1

逐行解释：

$(document).ready(function() {  // Executin everything on DOM Ready
      $('a').click(function(event) { // Event to trigger on the click of a tag
        $('a').removeClass('selected'); // Remove selected class from all the a tags.
        $(this).addClass('selected'); // Add selected class to the clicked a tag, this will do some styling to highlight the clicked one.
        event.preventDefault(); // Stopping the link to open, as preventDefault(); removes the default behaviour.
      })
});

event.preventDefault();是阻止链接打开，删除它的行，原因在代码注释中解释。

并且，您无论如何都不需要此代码，因为您要链接到不同的页面，如果您在点击a标记而不是打开时执行某些客户端脚本操作，这将非常有用且需要一个新标签。所以你可以删除它。

希望它有所帮助！

锚链接不工作bootstrap jscript

1 个答案: