Jquery .click 事件处理程序不适用于 CHROME 中的类选择器答案

【问题标题】：Jquery .click event handler not working for class selector in CHROMEJquery .click 事件处理程序不适用于 CHROME 中的类选择器
【发布时间】：2015-07-14 14:03:44
【问题描述】：

当发生 .click 事件时，当我尝试设置与 mouseover 相同的不透明度时，它不起作用。

我尝试过的： -不同的选择器（li、menu:li、li:a、.li-navclass、nav-text）

我们将不胜感激。提前谢谢！

.container {
	position: absolute;
	background:url('../images/bgpic.png');
    background-repeat: no-repeat;
    background-size: cover;
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
}

.wrapper {
	position: relative;
	margin: auto;
	padding: auto;
	height: 655px;
	width: 900px;
}

.titlehdr {
	margin: 0px;
	padding: 0px;	
	display: inline-block;
	width: 897px;
	height: 110px;
}

.title-div {
	display: inline-block;
	position: relative;
	height: 100%;
	width: 90px;

	margin: 0px;
	padding: 0px;
}


.title {
	position: relative;
	top: 40px;
	margin: 0px;
	padding: 0px;

	font-size: 70px;
	color: white;
	font-family: Mesquite Std;
	letter-spacing: 1.2px;

}

.barandgrill-div {
	display: inline-block;
	vertical-align: bottom;

}

.barandgrill-text {
	margin: 0px;
	padding: 0px;
	font-family: Arial;
	font-weight: bold;

}

/*---------------Nav Menu----------------*/
.menu {
	padding-left: 0px;
	margin-left: 0px;
	font-size: 15px;
}

.nav-container {
	text-align: center;
	display: block;
	top: 100px;
	margin: 0px;
	padding: 0px;
	width: 900px;
	height: 40px;
	background-color: #901423;
	border-style: solid;
	border-width: 1px;
	border-color: #111111;
}

.menu {
	display: inline-block;
	text-align: center;
	margin: auto;
	padding: auto;
 	list-style-type: none;
  	overflow: hidden;
    font-color: #000000;
}

.li-navclass {
 	 border-bottom: 1px solid #000;
}


li {
	display: inline-block;
	position: relative;
	padding: 0 1em;
	font-size: 150%;
}


.nav-text {
   	color: #ffffff;
  	font-weight: bold;
  	opacity: .3;
}


.nav-container ul a {
	text-decoration: none;
    word-spacing: 200px;
    margin: 0px;
    padding: 0px;
  	font-size: 20px;
  	font-family: Segoe Script;
}

/*---------------Content----------------*/

.content {
	display: block;
	width: 900px;
	height: 500px;
	border-style: solid;
	border-width: 1px;
	background-color: #111111;
	opacity: 0.6;
}

/*---------------Footer------------------*/

.foot {
	text-decoration: none;
	list-style-type: none;
	display: block;
	position: relative;
	text-align: center;
	font-size: 12px;
}

.ftr-button {
	position: relative;
	top: -5px;
	list-style: none;
	text-decoration: none;
	color: rgb(147, 104, 55);
}


.ftr-links {
	text-decoration: none;
	list-style-type: none;
}


.vert-line {
	height: 13px;
	border-right: 1px solid #909090;
}

<!DOCTYPE html>
<html lang="en">

<head>
	<title>Sticky Navigation Tutorial</title>                  
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	
	<link rel="stylesheet" media="screen, projection" href="css/screen.css"/>

</head>

<body>
	<div class="container">	
		
		<div class="wrapper">	


		<!--Title-->
					<div class="titlehdr">
						<div class="title-div">
							<p class="title">Donatelo's</p>
						</div>

						<div class="barandgrill-div">
							<p class="barandgrill-text">Mediterranean Bar and Grill</p>
						</div>
					</div>

		<!--Navigation Menu-->
					<div class="nav-container">
						<ul class="menu">
							<li class="li-navclass"><a href="index.html" class="nav-text">Story</a></li>
							<li class="li-navclass"><a href="menu.html" class="nav-text">Menu</a></li>
							<li class="li-navclass"><a href="gallery.html" class="nav-text">Gallery</a></li>
							<li class="li-navclass"><a href="catering.html" class="nav-text">Catering</a></li>
							<li class="li-navclass"><a href="contact.html" class="nav-text">Contact</a></li>
						</ul>		
					</div>

		<!--Grey Box-->
					<div class="content">
						<div id="sidebar">
							<div id="scroller">
							</div>
						</div>
					</div>

		<!--footer-->
					<div class="foot">
						<ul class="ftr-links">
							<li class="vert-line"><a href="index.html" class="ftr-button">Story</a></li>
							<li class="vert-line"><a href="menu.html" class="ftr-button">Menu</a></li>
							<li class="vert-line"><a href="gallery.html" class="ftr-button">Gallery</a></li>
							<li class="vert-line"><a href="catering.html" class="ftr-button">Catering</a></li>
							<li class="vert-line"><a href="contact.html" class="ftr-button">Contact</a></li>	
						</ul>
						<p class="copyright">Copyright © 2015 Agabi Mediterranean Restaurant</p>		
					</div>	
		</div>


</body>

<script>
$(document).ready(function(){
$(".nav-text").mouseover(function() {
  $( this ).css( "opacity", ".8" );
});

$(".nav-text").mouseout(function() {
	$(this).css( "opacity", ".2");
});

$(".ftr-button").mouseover(function() {
	$(this).css("color", "rgb(132, 131, 129)");
});
$(".ftr-button").mouseout(function() {
	$(this).css("color", "rgb(147, 104, 55)");
});

$(".nav-text").click(function() {
	$(this).css("opacity", ".8");
});
});
</script>

</html>

【问题讨论】：

标签： jquery html css eventhandler

【解决方案1】：

这是因为您的 .nav-text 位于 a 标签内。因此，您单击该链接并打开一个新页面。如果您不想在点击后打开新页面，则需要防止默认 a 标签。

做这样的事情 - 请注意，您的链接将不再有效：

$(".nav-text").click(function(event) {
    event.preventDefault();
    $(this).css("opacity", ".8");
});

如果这不是您要查找的内容，请查看 css 中的 :focushttp://www.w3schools.com/cssref/sel_focus.asp

【讨论】：

我只是想让它在我点击时，我点击的文本仍然突出显示。