尝试选择导航栏上的链接并显示其处于活动状态

时间:2016-04-15 01:16:28

标签: html twitter-bootstrap twitter-bootstrap-3 navbar

我想点击" Page 1"在以下链接的顶部导航栏上,这将使" Page 3"过滤条上的值处于活动状态并突出显示。我怎么能这样做?

请参阅jfiddle示例:https://jsfiddle.net/qtcz2guk/1/

的JavaScript

$('.nav a').click(function(){
$(this).parent().addClass('active').siblings().removeClass('active');   
});

CSS

.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
color: #d65c14;
background: #000;
}

HTML

<title>Bootstrap Case</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">WebSiteName</a></li>
      <li><a href="javascript:void(0)" onclick="myFunctiona(); return false">Page 1</a></li>
      <li><a href="javascript:void(0)" onclick="myFunctionb(); return false">Page 2</a></li>
      <li><a href="javascript:void(0)" onclick="myFunctionc(); return false">Page 3</a></li>
    </ul>
  </div>
</nav>

<div class="container">
  <h3>
  <p>A navigation bar is placed at the top of the page.</p>
  <p>A filter bar is placed in the middle of the page.</p>
  <p>Question: How can i make this work so that clicking "Page 1" on the top navbar makes the filter bar "Page 1" to be active and highlighted?</p>
  </h3> 
</div>


<div class="container">
<div id="menu" class="navbar navbar-default navbar-custom">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="javascript:void(0)" onclick="myFunctionall(); return false">FILTER BY /</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="javascript:void(0)" onclick="myFunctiona(); return false">Page 1</a></li>
<li><a href="javascript:void(0)" onclick="myFunctionb(); return false">Page 2</a></li>
<li><a href="javascript:void(0)" onclick="myFunctionc(); return false">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
</div>
</body>

0 个答案:

没有答案