Question

刚学习JavaScript。我在使用简单的菜单时遇到了麻烦。现在，我只是希望div类.welcome附加类.inactive-slide（不，不是一个非常有用的东西，但我只是在学习），但由于某种原因它不起作用。我的假设是我的选择器不正确（因此现在的常用短语）。

JavaScript代码：

var main = function(){  "use strict";
    $(li element selector).click(function() {
        $('.welcome').toggleClass('inactive-slide');
   });
};

$(document).ready(main);

相关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/

Answer 1

您的代码是正确的。它在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/

希望这有帮助!!!

Answer 2

在执行jQuery函数之前，必须包含jQuery文件在jsFiddle http://prntscr.com/8x404v它就在那里。

如果你为jsFiddle打开它，你的代码就开始工作了。可能你在包含jQuery之前执行你的main函数

将.click（）应用于li元素时应该使用什么选择器？

2 个答案: