锚链接不工作引导jscript

我用我的网站jquery插件设计垂直侧面菜单。顶部导航栏中的注销锚点链接和菜单中的测试链接不起作用。我是jquery的新手，我发现这个技巧在于html文件中jquery的最后部分。但找不到原因。请解释jQuery以及如何使链接工作。锚链接不工作引导jscript

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

来源

2015-11-13 Venkat Suresh

请为此创建一个jsfiddle – void

当我在最后一个链接工作时删除脚本部分。我想知道添加脚本和脚本功能的原因。谢谢 –

我用jquery插件网站的插件，现在我删除了注销中链接工作的最后一个脚本部分。为什么这样的脚本是在jQuery网站的垂直菜单插件中给出的。谢谢 –

解释一行一行：

$(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标记而不是打开新标记时执行某些客户端脚本，这将会有所帮助并且需要。所以你可以删除它。

希望它有帮助！

来源

2015-11-13 17:35:48 void

谢谢先生，我真的很感谢你的帮助 –

你能解释一下jquery中其他命令的用途吗？ –

锚链接不工作引导jscript

回答

相关问题