錨鏈接不工作引導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

回答

相關問題