[操作疑難] jquery onlick active

ching
唔知點解禁D掣去唔到網頁
active就有反應
many thanks
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  8.     <title>Bootstrap 101 Template</title>

  9. <!-- Latest compiled and minified CSS -->
  10. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

  11. <!-- Optional theme -->
  12. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">


  13.     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  14.     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  15.     <!--[if lt IE 9]>
  16.       <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  17.       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  18.     <![endif]-->
  19.   </head>
  20.   <body>
  21.   
  22.   

  23. <nav id="navlist" class="navbar navbar-default">
  24.     <div class="container-fluid">
  25.         <div class="navbar-header">
  26.             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
  27.             <a class="navbar-brand" href="../">HOME</a> </div>
  28.         <div id="navbar" class="navbar-collapse collapse">
  29.             <ul id="menav" class="nav navbar-nav navbar-right">
  30.                 <li class="active"><a href="index.php"><i aria-hidden="true" class="glyphicon glyphicon-th-list"></i> A</a></li>               
  31.                 <li><a href="index.php?page=process"><i aria-hidden="true" class="glyphicon glyphicon-send"></i> B</a></li>
  32.                 <li><a href="index.php?page=master"><i aria-hidden="true" class="glyphicon glyphicon-book"></i> C</a></li>
  33.                 <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i aria-hidden="true" class="glyphicon glyphicon-user"></i> D <span class="caret"></span></a>
  34.                     <ul class="dropdown-menu" role="menu">
  35.                         <li><a href="index.php?page=create"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> E</a></li>                        
  36.                         <li><a href="index.php?page=transfer"><span class="glyphicon glyphicon-transfer" aria-hidden="true"></span> F</a></li>
  37.                         <li><a href="index.php?page=delete"><span aria-hidden="true" class="glyphicon glyphicon-floppy-remove"></span> G</a></li>
  38.                         <li class="divider"></li>
  39.                         <li><a href="index.php?page=reset_mail"><span aria-hidden="true" class="glyphicon glyphicon-refresh"></span> H</a></li>
  40.                         <li><a href="index.php?page=reset_estaff"><span aria-hidden="true" class="glyphicon glyphicon-refresh"></span> I</a></li>
  41.                         <li><a href="index.php?page=reset_elearn"><span aria-hidden="true" class="glyphicon glyphicon-refresh"></span> J</a></li>
  42.                     </ul>
  43.                 </li>               
  44.                <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i aria-hidden="true" class="glyphicon glyphicon-cog"></i> K <span class="caret"></span></a>
  45.                     <ul class="dropdown-menu" role="menu">
  46.                         <li><a href="index.php?page=request"><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> N</a></li>
  47.                         <li><a href="index.php?page=maillist"><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> M</a></li>
  48.                         <li><a href="index.php?page=unitlist"><span aria-hidden="true" class="glyphicon glyphicon-menu-right"></span> O</a></li>
  49.                         <li><a href="index.php?page=postlist"><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> P</a></li>
  50.                         <li><a href="index.php?page=italist"><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> Q</a></li>                        
  51.                         <li class="divider"></li>
  52.                     </ul>
  53.                 </li>
  54.             </ul>
  55.         </div>
  56.         <!--/.nav-collapse -->
  57.     </div>
  58.     <!--/.container-fluid -->
  59. </nav>
  60.   
  61.   
  62.     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  63.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  64.     <!-- Include all compiled plugins (below), or include individual files as needed -->
  65. <!-- Latest compiled and minified JavaScript -->
  66. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
  67. <script>
  68. $(document).ready(function () {
  69. $('#navlist ul li a').click(function(e) {
  70.     e.preventDefault(); //prevent the link from being followed
  71.     $('#navlist ul li').removeClass('active');
  72.     $(this).parent().addClass('active');
  73. });

  74. });
  75. </script>
  76.   </body>
  77. </html>
複製代碼

Setup 個 jsbin, codepen 或者其他 fiddler 其他人會易睇啲。

TOP

Setup 個 ,  或者其他 fiddler 其他人會易睇啲。
justlazy 發表於 2015-11-16 13:25



    https://jsbin.com/labize/edit?html
條link唔知得唔得
thanks

TOP

e.preventDefault(); //prevent the link from being followed

句 comment 已經講咗

TOP

本帖最後由 carlkyo 於 2015-11-18 11:18 編輯
e.preventDefault(); //prevent the link from being followed

句 comment 已經講咗
llk 發表於 2015-11-16 21:19

冇反應
https://jsfiddle.net/DTcHh/
附件: 您需要登錄才可以下載或查看附件。沒有帳號?註冊

TOP

回覆 5# carlkyo

Comment out 左上面師兄講果句咪 OK 囉?

你開個 inspector 睇個係有 send request 架,不過無 router 去 handle 個 page parameter 喳嘛?

TOP

本帖最後由 carlkyo 於 2015-11-19 09:34 編輯
回覆  carlkyo

Comment out 左上面師兄講果句咪 OK 囉?

你開個 inspector 睇個係有 send request 架, ...
justlazy 發表於 2015-11-18 16:00


Comment左好似都有問題
好似係因為raload網頁令到佢還原左~~
thx

TOP

  1.                 $('.nav a').filter(function(){return this.href==location.href}).parent().addClass('active').siblings().removeClass('active')
  2.                 $('.nav a').click(function(){
  3.                         $(this).parent().addClass('active').siblings().removeClass('active')       
  4.                 })
複製代碼
solved
many thanks

TOP