刚刚学习JavaScript 。我在简单的菜单上遇到了麻烦。现在，我只想要 div类.welcome上课.inactive-slide附加到它(不，不是一个非常有用的东西，但我只是在学习)，但由于某种原因它不起作用。我的假设是我的选择器不正确(因此现在有一般短语)。
JavaScript代码:
var main = function(){ "use strict";
$(li element selector).click(function() {
$('.welcome').toggleClass('inactive-slide');
});
};
$(document).ready(main);
相关CSS:
.welcome {
width: 1000px;
text-align: left;
margin: auto;
border-left: medium solid #000000;
padding-left: 20px;
}
.inactive-slide{
display: none;
}
相关 HTML:
<div class="nav">
<div class="container">
<ul>
<li id="port"><a href="#">Portfolio</a></li>
<li><a href="#">Who We Are</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Pure Cause & Effect</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<div class="welcome">
<div class="welcometop">
<h1>welcome</h1>
</div>
<div>
<p>a bunch of words</p>
</div>
</div>
另外，这是 JSfiddle一切:https://jsfiddle.net/royal_wisdom/bqr7ew9z/3/
最佳答案
您的代码是正确的。它在 JSFiddle 中无法正常工作的唯一原因是您尚未添加 jQuery 引用。请参阅下面完全相同的代码(请注意最顶部添加的 jQuery 引用):
var main = function () {
"use strict";
$('.nav a').click(function () {
$('.welcome').toggleClass('inactive-slide');
});
};
$(document).ready(main);@charset"utf-8";
/* CSS Document */
.wrapper {
margin-left:auto;
margin-right:auto;
width:max;
height:max;
}
body {
background-color: #FFCE5F
}
.logoheader {
color: #000000;
min-height: 400px;
}
.imagecontainer {
text-align: center;
margin-top: 100px;
width: max;
background-color: #FFFFFF;
}
.nav {
}
.nav li {
display: inline-block;
margin: 28px 0 0 0;
border-bottom: 2px solid;
border-bottom-color: #000000;
}
.nav ul {
}
.nav .container {
text-align: center;
vertical-align:bottom;
background-color: #FFFFFF;
width: max;
}
#port {
color: #5a5a5a;
text-transform: uppercase;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
}
.welcometop {
text-align:center;
}
.welcome {
width: 1000px;
text-align: left;
margin: auto;
border-left: medium solid #000000;
padding-left: 20px;
}
.welcometop {
text-align:center;
}
.inactive-slide {
display: none;
}
.active-slide {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!doctype html>
<title>Rippe Keane</title>
<body>
<div class="wrapper">
<div class="logoheader">
<div class="imagecontainer">
<img src="https://media.glassdoor.com/sqll/248681/rippe-keane-marketing-squarelogo-1392301668926.png" alt="We're good at this, we promise!">
</div>
</div>
<div class="nav">
<div class="container">
<ul>
<li id="port"><a href="#">Portfolio</a>
</li>
<li><a href="#">Who We Are</a>
</li>
<li><a href="#">Clients</a>
</li>
<li><a href="#">Services</a>
</li>
<li><a href="#">Pure Cause & Effect</a>
</li>
<li><a href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
<div class="welcome">
<div class="welcometop">
<h1>Welcome to Rippe Keane Marketing</h1>
</div>
<div>
<p>Accountability. It's a word that makes most marketers squirm; after all, the science of marketing is a "soft" one. Or is it? At Rippe Keane, we believe that the customer's experience with your brand can be managed in its entirety; carefully crafted and executed to not merely satisfy, but to captivate and inspire. To cater to wants your customers didn't even know they had.
<p>As part of our unique brand architecture and strategic planning process, we make it our business to know your business. Top to bottom, inside and out. We develop innovative solutions for nearly anything that affects your bottom line, from public relations and media services to business planning and operations.</p>We are meticulous. Insightful. Observant. We scrutinize. Collaborate.
<p>And we develop a solid foundation before moving on to the creative fun stuff.</p>All so your customers keep coming back for more.
<p>The results we deliver don't happen by chance. They happen by design.</p>That's "Pure Cause and Effect."</p>
</div>
</div>
</div>
</body>
</html>如果您愿意，这里有一个 jsfiddle 示例(请注意页面左上角添加的 jQuery 引用):https://jsfiddle.net/z67ummw2/
希望这有帮助!!!
关于javascript - 将 .click() 应用于 li 元素时应使用什么选择器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33440500/