Reza
https://codepen.io/vsandeep2516/pen/XWbzPVa中编写了代码。问题是单击导航链接后出现白色补丁。@ sanriot,请参阅屏幕截图
.nav > li > a:focus, .nav > li > a:hover{
background: transparent !important;
}
var Deb = []; $.noConflict(); jQuery(document).ready(function($) { Deb.push(document.location); });
/*add*/ .nav>li>a:focus, .nav>li>a:hover { background: transparent!important; } body { margin: 0; padding: 0; font: 400 14px/24px 'Open Sans', sans-serif; } #header { float: left; width: 100%; position: relative; } .head-top { float: left; width: 100%; position: fixed; background: red; z-index: 999; } #nav { padding: 0; margin: 16px 0 0 0; list-style: none; } #nav li { display: inline-block; float: none; position: relative; padding: 0 0 20px 0; } #nav .active { background: transparent; } #nav li a { font: 400 14px/14px 'Lato', sans-serif; color: #000; text-transform: uppercase; text-decoration: none; padding: 0 20px; display: block; position: relative; z-index: 20; } #nav li:hover>a { background: none; } #nav li ul li a:hover, #nav li ul li:hover>a { text-decoration: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" /> <header id="header"> <section class="head-top"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="left-side"> <h1>sandeep</h1> </div> </div> <div class="col-md-6"> <div class="right-side"> <nav class="navbar "> <div class="navbar-header"> <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> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav" id="nav"> <li class="active"><a href="#" data-tab='main'>Home</a></li> <li><a href="#aboutus" data-tab="aboutus">About</a></li> <li><a href="#gallery" data-tab="gallery">Gallery </a></li> <li><a href="#career" data-tab="career">career</a></li> </ul> </div> </nav> </div> </div> </div> </div> </section> </header>
/* unvisited link */
a:link {
background-color: red !important;
}
/* visited link */
a:visited {
background-color: red !important;
}
/* mouse over link */
a:hover {
background-color: red !important;
}
/* selected link */
a:active {
background-color: red !important;
}