- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我正在尝试将点击事件监听器添加到 div,然后应该更改另一个元素中的 css 样式。我基本上是在尝试制作模型窗口。单击 div/按钮时,它应将显示属性从“无”更改为“边框框”。但是,单击 div 似乎没有任何效果。我已经尝试过控制台日志记录,但那里也没有任何显示。当我移动 div(正在单击)并将其放在 HTML 文档的不同部分时,它似乎工作正常。 super 困惑。
这是 HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Scott Munro - Portfolio</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Bungee+Outline|Titillium+Web" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<!-- nav bar -->
<nav class="navbar">
<a id="home-link" href="#top"></a>
<ul class="icon-list">
<li class="github-icon icon"><a href="https://github.com/catsinspacesuits"><i class="fab fa-github"></i></a></li>
<li class="linkedin-icon icon"><a href="#"><i class="fab fa-linkedin"></i></a></li>
<li class="codepen-icon icon"><a href="#"><i class="fab fa-codepen"></i></a></li>
</ul>
<ul class="header-list">
<li class="nav-link"><a href="#about-section">About</a></li>
<li class="nav-link"><a href="#projects-section">Projects</a></li>
<li class="nav-link"><a href="#contact-section">Contact</a></li>
</ul>
</nav> <!-- end of navbar -->
<div class="header-title">
<h1>Scott Munro</h1>
<h2>Web Developer</h2>
<div class="section-divider"></div>
</div>
<div class="scrolling">
<div id="top"></div> <!-- allows smooth scroll to top of page -->
<img src="layer-front3.png" class="layer" id="layer-one"></img>
<img src="layer1b.png" class="layer" id="layer-oneb"></img>
<img src="layer2.png" class="layer" id="layer-two"></img>
<img src="layer3.png" class="layer" id="layer-three"></img>
<img src="layer4.png" class="layer" id="layer-four"></img>
</div>
<div id="sun"></div>
<div id="sky"></div>
</header>
<!-- Sections: -->
<!-- INTRO -->
<section class="section-background intro-color">
<div class="intro-container container">
<p>Hi, I'm Scott! I'm a developer based in Berlin who is available for hire. I'm passionate about building apps with clean, tested and maintainable code. I have an aptitude for problem solving and a hunger for continuous improvement. I am looking to work as part of a team where I can contribute to a meaningful project whilst continuing to learn from my peers.</p>
</div>
</section>
<!-- ABOUT -->
<section class="section-background about-color">
<div class="about-container container">
<h2 id="about-section">About Me</h2>
<div class="section-divider"></div>
<img id="head" src="img/8bit_head.jpg" alt="head" class="responsive">
<p></p>
<div class="about-skills" class="about-box">
<h3>My Skills</h3>
<ul id="skill-list">
<li>HTML5</li>
<li>CSS3</li>
<li>SASS</li>
<li>Bootstrap</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Ruby</li>
<li>Rails</li>
<li>Responsive Web Design</li>
<li>Version Control (Git)</li>
</ul>
</div>
<a id="resume-button" href="cv.pdf" download>Download Resume
<div id="file-icon"></div>
</a>
</div> <!-- end of about container -->
</section>
<!-- PROJECTS -->
<section class="section-background projects-color">
<div class="projects-container container">
<h2 id="projects-section">Projects</h2>
<div class="section-divider"></div>
<div class="project">
<h3>E-commerce Site</h3>
<div class="project-image project-one"></div>
<p class="project-description">Lorem ipsum dolor sit amet, pri audire deterruisset ut, mei eu stet diceret pertinacia. Has salutandi mediocritatem te, copiosae disputationi conclusionemque in pro, fugit eleifend argumentum quo et. Sea te quidam instructior complectitur, est vidisse consequat deterruisset ex.</p>
<div class="project-icons">
<a href="https://github.com/catsinspacesuits/new-portfolio"><i class="fab fa-github project-btn"></i></a>
<div class="project-btn" id="modal-btn">More details</div>
<div class="project-btn">Visit site</div>
</div>
</div>
<div class="project">
<h3>Portfolio Site</h3>
<div class="project-image project-two"></div>
<p class="project-description">Mea novum iusto dignissim ne, zril convenire forensibus duo an, ne pri dicant dolores omittantur. Nam ex fugit deseruisse, no stet iuvaret conceptam vix. Sit ut tempor epicurei expetendis, ne mel odio suscipit disputando, ut choro munere sit.</p>
<div class="project-icons">
<a href="https://github.com/catsinspacesuits/new-portfolio"><i class="fab fa-github project-btn"></i></a>
<div class="project-btn">More details</div>
<div class="project-btn">Visit site</div>
</div>
</div>
<div class="project">
<h3>Calculator</h3>
<div class="project-image project-three"></div>
<p class="project-description">Eu vim nibh velit, no intellegat intellegam ius. Est harum movet exerci no, an eos harum tacimates adversarium. Ei soleat accommodare sed, decore soluta ad qui. Pri tamquam laoreet id. Nec labore noluisse consetetur ex, duo evertitur prodesset eu, et quod choro conceptam vix. Est modo contentiones in.</p>
<div class="project-icons">
<a href="https://github.com/catsinspacesuits/new-portfolio"><i class="fab fa-github project-btn"></i></a>
<div class="project-btn">More details</div>
<div class="project-btn">Visit site</div>
</div>
</div>
<div class="project">
<h3>Javascript To-do App</h3>
<div class="project-image project-four"></div>
<p class="project-description">Eu vim nibh velit, no intellegat intellegam ius. Est harum movet exerci no, an eos harum tacimates adversarium. Ei soleat accommodare sed, decore soluta ad qui. Pri tamquam laoreet id. Nec labore noluisse consetetur ex, duo evertitur prodesset eu, et quod choro conceptam vix. Est modo contentiones in.</p>
<div class="project-icons">
<a href="https://github.com/catsinspacesuits/new-portfolio"><i class="fab fa-github project-btn"></i></a>
<div class="project-btn">More details</div>
<div class="project-btn">Visit site</div>
</div>
</div>
<div class="modal"></div> <!-- Modal for projects windows -->
</div> <!-- end of project container -->
</section>
<div class="clearfix"></div> <!-- clear fix below Projects section -->
<!-- CONTACT -->
<section class="section-background contact-color">
<div id="contact-container" class="container">
<div id="contact-header">
<h2 id="contact-section">Get in Touch</h2>
<div class="section-divider"></div>
</div>
<p>Email me directly at <strong>simunro (at) hotmail (dot) co (dot) uk</strong> or fill out the form below. Be sure to check out my <span href="" class="form-link">Github</span>, <span class="form-link">LinkedIn</span> and <span class="form-link">Codepen</span> accounts too!</p>
<form action="https://formspree.io/simunro@hotmail.co.uk" method="POST">
<label>Name: </label>
<input type="text" name="name" id="name"><br>
<label>Email: </label>
<input type="email" name="_replyto"><br>
<label>Message: </label>
<textarea placeholder="Please leave your message here..." required></textarea><br>
<input type="submit" value="Send" id="send-button">
</form>
</div> <!-- end of contact container -->
</section>
<!-- FOOTER -->
<footer>
<ul class="icon-list">
<li class="github-icon icon"><a href="https://github.com/catsinspacesuits"><i class="fab fa-github"></i></a></li>
<li class="linkedin-icon icon"><a href="#"><i class="fab fa-linkedin"></i></a></li>
<li class="linkedin-icon icon"><a href="#"><i class="fab fa-codepen"></i></a></li>
</ul>
<div class="copyright"><p>©Scott Munro 2018</p></div>
<div class="section-divider"></div>
</footer>
<!-- SCRIPTS -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollorama.js"></script>
<script src="js/scripts.js" type="text/javascript"></script>
</body>
</html>
和 Javascript:
document.querySelector('#modal-btn').addEventListener('click',
function() {
document.querySelector('.modal').style.display = 'border-box';
});
和 CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Titillium Web, Arial, sans-serif;
font-size: 1rem;
}
/*NAV BAR*/
.navbar {
position: fixed;
top: 0;
z-index: 2;
width: 100%;
background-color: #222222;
}
.navbar ul {
float: right;
margin-top: 1rem;
}
.header-list {
margin-right: 2rem;
}
.navbar li {
display: inline-block;
padding: 0.8rem;
}
.navbar a {
color: white;
text-transform: uppercase;
letter-spacing: 0.6em;
text-decoration: none;
font-size: 0.8em;
}
.navbar a:hover {
color: #FFD03F;
}
.fab {
font-size: 1.8rem;
color: white;
}
.fab:hover {
color: #FFD03F;
}
#home-link {
float: left;
background-image: url(img/house_white.png);
background-size: 80%;
background-repeat: no-repeat;
margin: 25px 0px 0px 30px;
width: 40px;
height: 40px;
}
/*PARALLAX JUMBO*/
header {
width: 100%;
height: 720px;
}
.scrolling {
position: relative;
margin: auto;
width: 100%;
height: 600px;
z-index: 1;
}
.layer {
width: 100%;
height: 600px;
background-size: cover;
position: fixed;
}
#layer-one {
position: fixed;
height: 800px;
top: -60px;
left: 0;
z-index: -1;
}
#layer-oneb {
position: fixed;
height: 700px;
top: 60px;
left: 0;
z-index: -2;
}
#layer-two {
/*background-image: url('layer2.png');*/
left: 0;
top: 50px;
z-index: -4;
}
#layer-three {
/*background-image: url('layer3.png');*/
height: 700px;
top: -15px;
left: 0;
z-index: -3;
}
#layer-four {
/*background-image: url('layer4.png');*/
top: 65px;
left: 0;
z-index: -5;
}
#sun {
position: relative;
left: 80%;
z-index: -5;
border-radius: 50%;
width: 50px;
height: 50px;
background-color: #FFD03F;
box-shadow: 0px 0px 40px 20px #FFD03F;
animation: sunrise 6s ease-out forwards;
}
#sky {
position: relative;
top: -2rem;
z-index: -6;
width: 100%;
height: 600px;
background: linear-gradient(darkblue, #FFD03F);
animation: sky 6s ease-out forwards;
}
/*TITLE*/
.header-title {
position: absolute;
top: 150px;
left: 400px;
float: left;
z-index: 1;
text-align: center;
animation: fade 7s forwards;
}
.header-title h1 {
font-size: 4.7rem;
color: white;
letter-spacing: 0.6rem;
opacity: 0.3;
}
.header-title h2 {
font-size: 2.5rem;
color: white;
opacity: 0.3;
}
.header-title .section-divider {
width: 40%;
opacity: 0.3;
background-color: white;
}
/*SECTIONS*/
.section-background {
font-size: 1rem;
margin: 0 auto;
padding: 6rem 2rem 7rem 2rem;
z-index: -8;
}
.container {
width: 60%;
margin: 0 auto;
padding: 5rem 0;
background-color: white;
opacity: 0.9;
padding: 3rem;
}
.intro-color {
background-color: #07337A;
z-index: 8;
}
.about-color {
background-color: white;
}
.projects-color {
background-color: white;
position: relative;
}
.contact-color {
background-color: #ddd;
}
#top { /*enables smooth scrolling on home icon link*/
position: absolute;
top: -40rem;
}
/*INTRO SECTION*/
.intro-container p {
font-size: 2rem;
}
/*ABOUT SECTION*/
.about-container {
background-color: #07337A;
color: white;
box-shadow: 2rem 2rem 50rem 2rem grey;
}
.about-container p {
font-size: 1.3rem;
padding: 0 1rem 2rem 1rem;
line-height: 3rem;
}
.about-container h2 {
font-size: 2.6rem;
text-align: center;
padding: 2rem;
}
.about-box {
border: 1px solid black;
padding: 1.6rem;
margin: 3rem 1.5rem 3rem 0;
display: inline-block;
}
#resume-button {
border: 2px solid black;
padding: 1rem 4rem 1rem 1rem;
box-shadow: 3px 3px 5px black;
background-color: white;
text-decoration: none;
color: black;
transition: 700ms;
float: right;
}
#resume-button:hover {
background-color: #5c5292;
color: white;
}
#file-icon {
display: inline-block;
position: absolute;
top: 0.8rem;
right: 1rem;
width: 2rem;
height: 2rem;
background: url(img/file.png) no-repeat;
}
.about-skills li {
display: inline-block;
list-style-type: none;
padding: 0.3rem;
margin: 0.3rem;
border: 1px solid white;
border-radius: 5px;
}
.responsive { /*to make image responsive*/
width: 100%;
height: auto;
}
#head {
float: left;
width: 30%;
margin-right: 3rem;
}
/*PROJECTS SECTION*/
.projects-container h2 {
text-align: center;
padding: 3rem 0 1.6rem 0;
font-size: 2.6rem;
}
.projects-container {
width: 80%;
}
.project {
position: relative;
float: left;
width: 40%;
height: 400px;
border: 1px solid black;
padding: 2%;
margin: 4.5%;
text-align: left;
font-size: 0.9rem;
box-shadow: 0 0 5rem #b7b7b7;
}
.project-image {
width: 37%;
height: 45%;
float: left;
background-size: cover;
background-position: center center;
border: 1px solid black;
margin: 1rem 1rem 0 0;
}
.project p {
padding: 1rem 0;
}
.project-icons {
width: 100%;
position: absolute;
bottom: 1%;
left: 0;
font-size: 1rem;
padding: 8px;
}
.project-btn {
float: left;
border: 1px solid black;
padding: 7px 20px;
margin: 0 5px;
border-radius: 4px;
box-shadow: 3px 3px 10px grey;
}
.project-icons .fab {
color: black;
border: none;
font-size: 2.6rem;
padding: 0;
margin-right: 10px;
}
.project-three {
background-image: url(img/calculator.jpg);
}
.project-four {
background-image: url(img/todo.png);
}
.clearfix {
clear: both;
}
/*PROJECTS MODAL*/
.modal {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.7);
display: none;
}
/*CONTACT SECTION*/
#contact-container {
padding: 0;
width: 50%;
clear: both;
}
#contact-container h2 {
text-align: center;
font-size: 2.4rem;
margin: 1.2rem;
padding: 2rem 4rem 0 4rem;
}
#contact-header {
width: 100%;
margin: 0 auto;
padding: 0 0 3% 0;
background-color: #07337A;
color: white;
}
.section-divider {
width: 24%;
height: 4px;
margin: 0 auto 3rem auto;
background-color: lightblue;
}
#contact-container {
box-shadow: 0 0 100px #555555;
}
#contact-container p {
padding: 2.6rem;
text-align: center;;
font-size: 1.7rem;
}
.form-link {
color: #1158C8;
}
form {
margin: 0 auto;
width: 100%;
background-color: white;
text-align: center;
}
form label {
display: block;
padding: 0.7rem 0;
}
form textarea {
height: 14rem;
}
input, textarea {
display: inline-block;
width: 80%;
border: 1px solid black;
padding: 0.5rem;
margin: 0 auto;
}
#send-button {
margin: 3rem auto;
border: 1px solid #222222;
padding: 0.5rem;
box-shadow: 5px 5px 20px #333333;
background-color: #09429D;
color: white;
font-size: 1rem;
letter-spacing: 0.3rem;
transition: 400ms;
}
#send-button:hover {
background-color: #07337A;
cursor: pointer;
}
/*FOOTER*/
footer {
position: absolute;
height: auto;
width: 100%;
background-color: #222222;
}
footer li {
list-style: none;
display: inline-block;
padding: 1rem;
}
.icon-list {
width: 12rem;
height: 4rem;
margin: 0 auto;
}
.copyright p {
width: 100%;
margin: 0 auto;
text-align: center;
letter-spacing: 0.4em;
font-size: 1rem;
padding-bottom: 1rem;
color: white;
background-color: #222222;
}
footer .section-divider {
background-color: white;
margin-bottom: 1.5rem;
border: 0.5px solid white;
height: 1px;
width: 11rem;
}
/*KEYFRAMES*/
@keyframes sky {
from {top: 10px;}
to {top: -170px;}
}
@keyframes sunrise {
from {top: 450px;}
to {top: 210px;}
}
@keyframes fade {
from {opacity: 0;}
to {opacity: 1;}
}
/*MEDIA QUERIES*/
/*Small:*/
@media only screen and (max-width: 600px) {
html {font-size: 10px;}
.container {width: 100%;
padding: 8px;
margin: 0;
}
#contact-container {width: 100%;}
.projects-container {width: 100%;}
.layer {width: 100vw;
height: 100vh;
object-fit: cover;}
.section-background {padding: 0;}
.header-title h1 {font-size: 24px;}
.header-title {left: 70px;
top: 160px;
}
}
#home-link {display: none;}
}
最佳答案
边框框不适用于显示属性。正如 David 提到的,border-box 用于调整盒子大小。你的 JS 工作正常,我会把它扔进一个片段给你:
document.querySelector('#modal-btn').addEventListener('click',
function() {
console.log('working');
document.querySelector('.modal').style.display = 'block';
});
.modal {
display: none;
}
#modal-btn {
cursor: pointer;
}
<section class="section-background projects-color">
<div class="projects-container container">
<h2 id="projects-section">Projects</h2>
<div class="section-divider"></div>
<div class="project">
<h3>E-commerce Site</h3>
<div class="project-image project-one"></div>
<p class="project-description">Lorem ipsum dolor sit amet, pri audire deterruisset ut, mei eu stet diceret pertinacia. Has salutandi mediocritatem te, copiosae disputationi conclusionemque in pro, fugit eleifend argumentum quo et. Sea te quidam instructior complectitur, est vidisse
consequat deterruisset ex.</p>
<div class="project-icons">
<a href="https://github.com/catspacesuits/new-portfolio"><i class="fab fa-github project-btn"></i></a>
<div class="project-btn" id="modal-btn">More details</div>
<div class="project-btn">Visit site</div>
</div>
</div>
<div class="modal"></div>
<!-- Modal window -->
</div>
<!-- end of project container -->
</section>
我将 display: border-box 更改为 display: block 和那个函数。我还添加了一个控制台日志,以显示当您单击按钮时它正在触发。
关于javascript - JS点击事件监听器没有按预期触发功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50743169/
当单击复选框(或选择所有复选框)时,我想向 CheckboxSelectionModel 添加一个监听器。 var smSensors = new xg.CheckboxSelectionModel(
我有一个简单的程序,允许 2 个客户端连接到服务器。 连接后,他们可以轮流点击空白卡片图像。 一旦 2 个客户中的任何一个点击空白卡片图片,卡片图片将变为 Ace 俱乐部图片。 更改将显示在客户端的两
我在这里看到了一个代码,该代码以字符串的形式检索鼠标的当前图标,但是此代码使用了TTimer来实现。 因此,我想知道是否存在某些事件(侦听器)来检测鼠标光标图标上的这些更改。 下面是使用TTimer的
我想在我的配置对象上获得一个 onload 事件。 以下工作,除非我创建一个 config.listeners={..} (我认为这就是我需要的?)替换 this.onload({...}); 我什至
通常,在 Java 中,当我有一个向其他对象提供某种通知的对象时,我将使用 Listener/Observer 模式。 有没有更类似于 Scala 的方式来做到这一点?我应该在 Scala 中使用这种
我有一个带有动画器的游戏对象和一些可以触发事件的动画(具有特定的回调函数)。 只要我将脚本添加到与动画器相同的游戏对象(包括接收器),一切都会正常工作: public class AnimatorEv
我有一个带有监听器的 DialogFragment,用于单击按钮以调用 fragment 中的函数。 我收到 lateinit property listener has not been initi
这个问题已经有答案了: Java ActionListener error: incompatible types (4 个回答) 已关闭 5 年前。 我最近刚刚开始学习 Java 代码。我在添加监听
我的代码遇到问题。我想知道是否有一种更简单的方法来使用监听器,而不是不断地这样做: example.addActionListener(new java.awt.event.ActionListene
有没有办法使用 .net 创建控制台应用程序。或通过某个端口监听 SMTP 消息的服务? 我需要创建一个中间层对象来捕获和处理 smtp 消息。也就是说,我希望该监听器发送和接收 smtp 消息,然后
我有一个带有动画器的游戏对象和一些可以触发事件的动画(具有特定的回调函数)。 只要我将脚本添加到与动画器相同的游戏对象(包括接收器),一切都会正常工作: public class AnimatorEv
我有许多向主事件生成服务注册的监听器。然而,我想告诉听众,事件流在某个时刻将会结束。您会通过简单地调用监听器上的方法(例如 finish())来完成此操作,还是有一个单独的事件方法 streamFin
我的代码有什么问题。 我创建了一个 JList,添加了项目并将其推到左侧(BorderLayout.WEST)。每次单击列表项时,我希望在列表右侧显示一个面板。但问题是,当选择列表项并运行监听器时,到
关闭。此题需要details or clarity 。目前不接受答案。 想要改进这个问题吗?通过 editing this post 添加详细信息并澄清问题. 已关闭 8 年前。 Improve th
这可能是一个简单的问题,但我没有看到它。 我有一个界面 public interface RenderableListener{ public void update(T element);
有人可以直接指出我的正确方向吗?当从组合框中选择适当的选项时,我希望小程序中的 Action 监听器显示从 html 文件检索的 jlabel 中的 3 个参数之一。 干杯 最佳答案 对于组合框,您需
我有一个网站,每个页面上都有许多 jQuery 事件处理程序,所有这些都在一个大型 .js 文件中。 这意味着对于任何页面,大多数事件处理程序都是针对不存在且根本不会使用的 HTML。 这会影响我的表
我有一些 jQuery 监听器设置,用于监听 type="text" 字段上的表单输入。但是,当用户从自动完成下拉框中选择一个选项(即他们之前输入的值已被记住以供将来使用)时,下面的监听器不会收集该值
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗?更新问题,使其仅关注一个问题 editing this post . 已关闭 9 年前。 Improve this ques
我正在用 unity (c#) 做一个类似国际象棋的游戏,但我在尝试进行向上转换以将信息从一个 child 发送到另一个抽象类时遇到了困难。 基本上,我有一个抽象类,它有一个带有函数的事件/委托(de
我是一名优秀的程序员,十分优秀!