单击导航栏链接后如何删除颜色背景

Question

我已在以下链接中编写了代码Reza https://codepen.io/vsandeep2516/pen/XWbzPVa。问题是单击导航链接后会出现白色色块。

@sanriot 请参考截图

Answer 1

添加以下 CSS：.nav > li > a:focus, .nav > li > a:hover{&nbsp; background: transparent !important;}var Deb = [];$.noConflict();jQuery(document).ready(function($) {&nbsp; Deb.push(document.location);});/*add*/.nav>li>a:focus,.nav>li>a:hover {&nbsp; background: transparent!important;}body {&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; font: 400 14px/24px 'Open Sans', sans-serif;}#header {&nbsp; float: left;&nbsp; width: 100%;&nbsp; position: relative;}.head-top {&nbsp; float: left;&nbsp; width: 100%;&nbsp; position: fixed;&nbsp; background: red;&nbsp; z-index: 999;}#nav {&nbsp; padding: 0;&nbsp; margin: 16px 0 0 0;&nbsp; list-style: none;}#nav li {&nbsp; display: inline-block;&nbsp; float: none;&nbsp; position: relative;&nbsp; padding: 0 0 20px 0;}#nav .active {&nbsp; background: transparent;}#nav li a {&nbsp; font: 400 14px/14px 'Lato', sans-serif;&nbsp; color: #000;&nbsp; text-transform: uppercase;&nbsp; text-decoration: none;&nbsp; padding: 0 20px;&nbsp; display: block;&nbsp; position: relative;&nbsp; z-index: 20;}#nav li:hover>a {&nbsp; background: none;}#nav li ul li a:hover,#nav li ul li:hover>a {&nbsp; 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">&nbsp; <section class="head-top">&nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-6">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="left-side">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1>sandeep</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-6">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="right-side">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <nav class="navbar ">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="navbar-header">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="navbar" class="collapse navbar-collapse">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul class="nav navbar-nav" id="nav">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="active"><a href="#" data-tab='main'>Home</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#aboutus" data-tab="aboutus">About</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#gallery" data-tab="gallery">Gallery </a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#career" data-tab="career">career</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </nav>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </section></header>

Answer 2

在最后添加这个/* unvisited link */a:link {&nbsp; background-color: red !important;}/* visited link */a:visited {&nbsp; background-color: red !important;}/* mouse over link */a:hover {&nbsp; background-color: red !important;}/* selected link */a:active {&nbsp; background-color: red !important;}