BS .nav-pills保持抑郁

时间：2016-10-03 02:32:44

标签： jquery html css twitter-bootstrap

我不确定它是否与focus元素状态有关，但是当我点击其中一个.nav-pills时（请参阅下面的示例），它似乎变为.active ，即使我将鼠标移开，直到我点击页面上的其他地方。在Google Chrome网络检查员上，它没有显示任何证据。我希望第一颗药丸成为我页面上唯一的活性药丸。

＆＃13;
＆＃13; 
/* Primary Syle Sheet */

/* Basic Typography */

#topnav {
	margin-bottom: 30px;
}

#topnav .nav-pills > li {
	margin-left: 11px;
	margin-right: 11px;
	text-size: 100px;
}

#topnav>.nav-pills>li>a {
	padding-top: 11px;
	padding-bottom: 11px;
	font-size: 24px;
	color: #333;
}

#topnav>.nav-pills>li.active>a, #topnav>.nav-pills>li>a:hover {
	background-color: #eee;
}

.nav-pills>li>a:hover {
	opacity: 0.7;
}

#navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
}

@media (min-width: 768px) {
	#navbar-nav>li>a {
    	padding-top: 15px;
    	padding-bottom: 15px;
    	margin-top: 3px;
    	margin-bottom: 3px;
    }
    #navbar-nav {
    	width: 100%;
    	text-align: center !important;
  	}
  	#navbar-nav > li {
      	float: none;
      	display: inline-block;
    }
}

.center-pills {
	display: inline-block;
}

.h1 small.sbttl, .h2 small.sbttl, .h3 small.sbttl, .h4 small.sbttl, .h5 small.sbttl, .h6 small.sbttl, h1 small.sbttl, h2 small.sbttl, h3 small.sbttl, h4 small.sbttl, h5 small.sbttl, h6 small.sbttl {
	display: block;
	font-size: 33%;
	color: inherit !important;
	opacity: 0.75;
}

/* Targeted Stylings */

header {
    background-color: yellow;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    text-align: center;
    color: #fff !important;
}

@media (min-width: 768px) {
	header .brand-name {
    	padding-top: 200px !important;
    	padding-bottom: 200px !important;
	}
}

header .brand-name {
    padding-top: 100px;
    padding-bottom: 100px;
}

header .brand-name h1 {
	font-size: 75px;
	font-style: italic;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Example</title>
    
    <!-- Primary Stylesheets -->
    <link href="css/styles_1.css" rel="stylesheet">

    <!-- Bootstrap -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body id="page-top" class="index">
  	<header>
  		<div class="container">
  			<div class="brand-name">
  				<h1>Title <small class="sbttl">Subtitle</small></h1>
  			</div>
  		
  			<!-- Initial -->
  			<div class="container text-center" id="topnav">
  				<ul class="nav nav-pills center-pills">
  					<li role="presentation" class="active"><a href="#">content</a></li>
  					<li role="presentation"><a href="#">content</a></li>
  					<li role="presentation"><a href="#">content</a></li>
  					<li role="presentation"><a href="#">content</a></li>
				</ul>
  			</div>
  		</div>
  	</header>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

很抱歉，如果我的代码片段中包含太多内容，我是Stack Overflow的新手。

3 个答案:

答案 0 :(得分：0)

active修饰符将始终使指定的按钮显示为活动状态。在您的示例中，您已正确完成，您只是看到了hover修饰符。您可以使用

进行更改 
li:hover{
   /*insert code here
}

在css。

答案 1 :(得分：0)

/* Primary Syle Sheet */

/* Basic Typography */

#topnav {
	margin-bottom: 30px;
}

#topnav .nav-pills > li {
	margin-left: 11px;
	margin-right: 11px;
	text-size: 100px;
}

#topnav>.nav-pills>li>a {
	padding-top: 11px;
	padding-bottom: 11px;
	font-size: 24px;
	color: #333;
}

#topnav>.nav-pills>li.active>a, #topnav>.nav-pills>li>a:hover {
	background-color: #eee;
}

.nav-pills>li>a:hover {
	opacity: 0.7;
}

#navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
}

@media (min-width: 768px) {
	#navbar-nav>li>a {
    	padding-top: 15px;
    	padding-bottom: 15px;
    	margin-top: 3px;
    	margin-bottom: 3px;
    }
    #navbar-nav {
    	width: 100%;
    	text-align: center !important;
  	}
  	#navbar-nav > li {
      	float: none;
      	display: inline-block;
    }
}

.center-pills {
	display: inline-block;
}

.h1 small.sbttl, .h2 small.sbttl, .h3 small.sbttl, .h4 small.sbttl, .h5 small.sbttl, .h6 small.sbttl, h1 small.sbttl, h2 small.sbttl, h3 small.sbttl, h4 small.sbttl, h5 small.sbttl, h6 small.sbttl {
	display: block;
	font-size: 33%;
	color: inherit !important;
	opacity: 0.75;
}

/* Targeted Stylings */

header {
    background-color: yellow;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    text-align: center;
    color: #fff !important;
}

@media (min-width: 768px) {
	header .brand-name {
    	padding-top: 200px !important;
    	padding-bottom: 200px !important;
	}
}

header .brand-name {
    padding-top: 100px;
    padding-bottom: 100px;
}

header .brand-name h1 {
	font-size: 75px;
	font-style: italic;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Example</title>
    
   

    <!-- Bootstrap -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 <!-- Primary Stylesheets -->
    <link href="css/styles_1.css" rel="stylesheet">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body id="page-top" class="index">
  	<header>
  		<div class="container">
  			<div class="brand-name">
  				<h1>Title <small class="sbttl">Subtitle</small></h1>
  			</div>
  		
  			<!-- Initial -->
  			<div class="container text-center" id="topnav">
  				<ul class="nav nav-pills center-pills">
  					<li role="presentation" class="active"><a href="#" data-toggle="pill">content</a></li>
  					<li role="presentation"><a data-toggle="pill" href="#">content</a></li>
  					<li role="presentation"><a data-toggle="pill" href="#">content</a></li>
  					<li role="presentation"><a data-toggle="pill" href="#">content</a></li>
				</ul>
  			</div>
  		</div>
  	</header>

   
  </body>
</html>

  

嗨，你必须使用data-toggle =“pill”和你的锚标签......快乐   编码

答案 2 :(得分：0)

.li:active {
            background-color: yellow;
        }

使用此css，以便在您点击链接时将其背景颜色更改为黄色，这不会影响您的整体布局：）

相关问题
最新问题