因此,我页面上有三个链接,它们是我的电子邮件,当您单击它们时,它应该将电子邮件复制到剪贴板。它是这样做的,但是由于某些原因,仅在Firefox中,单击链接后,它将在链接上创建此蓝色突出显示。单击链接后,有什么方法可以删除此链接?这是我的html,css和javascript:
$(document).ready(function() {
$("#open_menu").click(function() {
$("#menu").css({
"pointer-events":"auto",
"display":"flex"
});
if($("#menu").hasClass("component-drop_down_menu_hide_animation"))
{
$("#menu").removeClass("component-drop_down_menu_hide_animation");
}
$("#menu").addClass("component-drop_down_menu_show_animation");
$("#component-main_content").css({"pointer-events":"none"});
if($("#component-main_content").hasClass("component-drop_down_menu_close_animation"))
{
$("#component-main_content").removeClass("component-drop_down_menu_close_animation");
}
$("#component-main_content").addClass("component-drop_down_menu_open_animation");
});
$("#close_menu").click(function() {
$("#menu").css({
"pointer-events":"none",
"display":"none"
});
if($("#menu").hasClass("component-drop_down_menu_show_animation"))
{
$("#menu").removeClass("component-drop_down_menu_show_animation");
}
$("#menu").addClass("component-drop_down_menu_hide_animation");
if($("#component-main_content").hasClass("component-drop_down_menu_open_animation"))
{
$("component-main_content").removeClass("component-drop_down_menu_open_animation");
}
$("#component-main_content").addClass("component-drop_down_menu_close_animation");
$("#component-main_content").css({"pointer-events":"auto"});
});
$("#green_email_one").click(function() {
$("#green_email_one").addClass("component-footer_background_color__green_emails_when_clicked");
var range = document.createRange();
var selection = window.getSelection();
range.selectNodeContents(document.getElementById('green_email_one'));
selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
});
$("#green_email_two").click(function() {
$("#green_email_two").addClass("component-footer_background_color__green_emails_when_clicked");
var range = document.createRange();
var selection = window.getSelection();
range.selectNodeContents(document.getElementById('green_email_two'));
selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
})
$("#grey_email").click(function() {
$("#grey_email").addClass("component-footer_background_color__grey_email_when_clicked")
var range = document.createRange();
var selection = window.getSelection();
range.selectNodeContents(document.getElementById('grey_email'));
selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
})
$("#drop_down_menu_email").click(function() {
$("#drop_down_menu_email").addClass("component-drop_down_menu__email_when_clicked");
var range = document.createRange();
var selection = window.getSelection();
range.selectNodeContents(document.getElementById('drop_down_menu_email'));
selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
})
});
body {
font-family: Arial, Helvetica, sans-serif;
}
h1,h2,h3,h4,h5,h6,p {
margin: 0;
color: #34302D;
margin-bottom: 20px;
font-weight: normal;
}
h1 {
font-size: 30px;
}
h2 {
font-size: 20px;
}
p {
font-size: 18px;
line-height: 30px;
}
a {
font-size: 20px;
color: #34302D;
text-decoration: none;
border-bottom: 1px solid white;
}
a:visited {
color: #86C543;
border-bottom-color: #86C543;
}
nav a:after {
content: "";
display: block;
height: 0;
width: 1px;
}
nav {
line-height: 50px;
}
.component-surrounding_div {
position: relative;
}
.component-drop_down_menu--variant-modifier {
opacity: 0;
margin: 5%;
z-index: 10;
width: 90%;
position: fixed;
display: flex;
top: 0;
left: 0;
pointer-events: none;
}
#component-main_content {
position: absolute;
top: 0;
left: 0;
}
.component-header__left-div__nav > a {
font-size: 23px;
border-bottom: none;
color: #34302D;
}
.component-header__left-div__nav_active_a {
color: #86C543 !important;
}
.component-div_margin {
margin: 5% 5% 110px 5%;
}
#component-div_margin_projects_page {
margin-bottom: 120px;
}
.component-div_margin__email_color {
color: #86C543;
}
.component-div_margin_h2_after_description {
color: #E6E6E6;
}
.component-header_green_bar {
height: 2px;
background-color: #86C543;
}
.component-div_margin__header_div {
display: flex;
}
.component-header__left-div {
width: 90%;
}
#component-description_div__h2 {
font-size: 25px;
line-height: 30px
}
.component-header__right-div {
width: 10%;
}
#component-div_margin__social_p {
margin-bottom: 10px;
}
.component-footer_background_color {
background-color: #34302D;
padding: 50px 5% 40px 5%;
}
.component-footer_background_color__email_border_color {
border-bottom-color: #34302D;
display: inline-block;
margin-bottom: 20px;
}
.component-footer_background_color__div {
margin-bottom: 50px;
}
.component-footer_background_color__first_div {
margin-bottom: 60px;
}
.component-footer_background_color__h2 {
color: #FFFFFF;
}
.component-footer_background_color__h2_after_first {
font-size: 18px;
margin-bottom: 15px;
}
.component-footer_background_color__p {
margin-bottom: 0;
line-height: 25px;
}
.component-footer_background_color__first_h2_margin {
margin-bottom: 7px;
}
.component-footer_background_color__nav {
line-height: 25px;
}
.component-footer_background_color__a {
color: #E6E6E6;
border-bottom: 1px solid #34302D;
font-size: 17px;
}
.component-footer_background_color__a:visited {
color: #E6E6E6;
border-bottom-color: #E6E6E6;
}
.component-footer_background_color__green_emails_when_clicked {
border-bottom-color: #86C543;
}
.component-footer_background_color__grey_email_when_clicked {
border-bottom-color: #E6E6E6;
}
.component-drop_down_menu__email_when_clicked {
color: #86C543 !important;
}
.component-footer_background_color__green_emails_when_clicked::selection,
.component-footer_background_color__grey_email_when_clicked::selection,
.component-drop_down_menu__email_when_clicked::selection {
background-color: transparent;
-moz-appearance: none;
}
.component-drop_down_menu_open_animation {
animation-name: drop_down_menu_open;
animation-fill-mode: forwards;
animation-duration: .5s;
}
.component-drop_down_menu_close_animation {
animation-name: drop_down_menu_close;
animation-fill-mode: forwards;
animation-duration: .5s;
}
.component-drop_down_menu_show_animation {
animation-name: drop_down_menu_show;
animation-fill-mode: forwards;
animation-delay: .3s;
animation-duration: .5s;
}
.component-drop_down_menu_hide_animation {
animation-name: drop_down_menu_hide;
animation-fill-mode: forwards;
animation-duration: .5s;
}
@keyframes drop_down_menu_show {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes drop_down_menu_hide {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes drop_down_menu_open {
from {
opacity: 1;
}
to {
opacity: 0.01;
}
}
@keyframes drop_down_menu_close {
from {
opacity: 0.01;
}
to {
opacity: 1;
}
}
<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">
<!-- This is so viewing website is scaled well on all devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- This is where I am getting all my icons from -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<!-- Image by fontawesome.com. Here is link to image: https://fontawesome.com/icons/info-circle?style=solid -->
<link rel="icon" href="Images/info-circle-solid.png">
<!-- To remove default browser styling -->
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.0/normalize.css">
<!-- My style sheet -->
<link rel="stylesheet" href="css/style.css">
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- My script -->
<script src="JavaScript/javascript.js"></script>
<title>About</title>
</head>
<body>
<!-- Div container to create drop-down menu overlay functionality -->
<div class="component-surrounding_div">
<!-- Drop-down menu -->
<div class="component-drop_down_menu--variant-modifier" id="menu">
<!-- Navigation -->
<div class="component-header__left-div">
<nav class="component-header__left-div__nav">
<a href="index.html" class="component-header__left-div__nav_active_a">About</a>
<a href="projects.html">Projects</a>
<a href="javascript:;" id="drop_down_menu_email">chadwilson959@yahoo.com</a>
</nav>
</div>
<!-- Exit button -->
<div class="component-header__right-div">
<i class="fas fa-times fa-3x" id="close_menu"></i>
</div>
</div>
<!-- Main Content -->
<div id="component-main_content">
<!-- Green Bar -->
<div class="component-header_green_bar"></div>
<header class="component-div_margin">
<div class="component-div_margin__header_div">
<div class="component-header__left-div">
<h1>Hi, I'm Chad.</h1>
</div>
<!-- Open menu button -->
<div class="component-header__right-div">
<i class="fas fa-bars fa-2x" id="open_menu"></i>
</div>
</div>
</header>
<!-- Intro section -->
<div class="component-div_margin">
<h2 id="component-description_div__h2">I am an aspiring front-end web developer.</h2>
<p>I use my front-end web development skills to create beautiful and efficent websites.</p>
<p>I am also knowledgeable with back-end web development but front-end web development is my expertise.</p>
</div>
<!-- Projects section -->
<div class="component-div_margin">
<h2 class="component-div_margin_h2_after_description">Projects</h2>
<p>Sorry, nothing to show here at the moment except for this website I built.</p>
<p>However, I am in the process of developing a prayer application with a group of other developers I worked with last summer during an internship that will soon be deployed!</p>
</div>
<!-- Resume section -->
<div class="component-div_margin">
<h2 class="component-div_margin_h2_after_description">Resume</h2>
<div>
<p>Click the link below to view my resume.</p>
<div>
<a href="https://drive.google.com/file/d/1OZmiZXM1XlSSVFU3O_cojis07KVhB-dL/view?usp=sharing" target="_blank">Resume</a>
</div>
</div>
</div>
<!-- Social media section -->
<div class="component-div_margin">
<h2 class="component-div_margin_h2_after_description">Social</h2>
<p id="component-div_margin__social_p">Here are links to my Linkedin and GitHub accounts.</p>
<nav>
<a href="https://www.linkedin.com/in/chad-wilson-b35160b6/" target="_blank">Linkedin</a>
<a href="https://github.com/chadwilson20" target="_blank">GitHub</a>
</nav>
</div>
<!-- Email section -->
<div class="component-div_margin">
<h2 class="component-div_margin_h2_after_description">Contact</h2>
<p>Here is my email if you wish to contact me. Click on my email address below to copy the address to your clipboard.</p>
<a href="javascript:;" class="component-div_margin__email_color" id="green_email_one">chadwilson959@yahoo.com</a>
</div>
<!--Footer-->
<footer class="component-footer_background_color">
<div class="component-footer_background_color__first_div">
<h2 class="component-footer_background_color__h2 component-footer_background_color__first_h2_margin">Chad Wilson</h2>
<a href="javascript:;" class="component-div_margin__email_color component-footer_background_color__email_border_color" id="green_email_two">chadwilson959@yahoo.com</a>
<p class="component-footer_background_color__a component-footer_background_color__p">I use my front-end web development skills to create beautiful and efficent websites.</p>
</div>
<div class="component-footer_background_color__div">
<h2 class="component-footer_background_color__h2 component-footer_background_color__h2_after_first">Menu</h2>
<nav class="component-footer_background_color__nav">
<a href="index.html" class="component-footer_background_color__a">About</a>
<a href="projects.html" class="component-footer_background_color__a">Projects</a>
</nav>
</div>
<div class="component-footer_background_color__div">
<h2 class="component-footer_background_color__h2 component-footer_background_color__h2_after_first">Contact</h2>
<a href="javascript:;" class="component-footer_background_color__a" id="grey_email">chadwilson959@yahoo.com</a>
</div>
<div>
<h2 class="component-footer_background_color__h2 component-footer_background_color__h2_after_first">Social</h2>
<nav class="component-footer_background_color__nav">
<a href="https://www.linkedin.com/in/chad-wilson-b35160b6/" target="_blank" class="component-footer_background_color__a">Linkedin</a>
<a href="https://github.com/chadwilson20" target="_blank" class="component-footer_background_color__a">GitHub</a>
</nav>
</div>
</footer>
</div>
</div>
</body>
</html>
如果您在查找我正在谈论的链接时遇到问题,请告诉我。预先谢谢你。
答案 0 :(得分:1)
完成复制后,删除选择范围:
link.onclick = e => {
e.preventDefault();
var range = document.createRange();
var selection = window.getSelection();
range.selectNodeContents(link);
selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
// now clear the selection
selection.removeAllRanges();
};
<a href="#" id="link">hello world</a>