Question

我有一部分网页（#skills），我希望锚点在点击时在新标签页中打开。我已经在其他一些页面上做了这个，只是使用特定选择器定位每个链接，但现在我想要定位所有链接，除了我的菜单和联系人框中的链接。因此，我首先尝试使用#skills，然后我将在页面的其他部分实现它。到目前为止，我无法获得解决方案（我尝试修改this）。

我将整个内容作为一个片段发布，而不仅仅是严格相关的代码，以防我错过了一些明显的东西，例如链接jQuery错误或一些随机的css漏洞。

感谢任何帮助和/或输入。

＆＃13;

null

＆＃13;

$(document).ready(function {
  $('#skills a').click(function() {
    window.open($(this).attr('href'));
    return false;
  });
});

＆＃13;

/********************************************
SPLOŠNO
********************************************/

body {
  font-family: 'Ubuntu', sans-serif;
  line-height: 120%;
  margin: 0;
  background: url("../images/greyzz.png");
}
a {
  color: #94b7ec;
  text-decoration: none;
}
a:hover {
  color: #0e2951;
  text-decoration: none;
}
/********************************************
HEADER
********************************************/

.header {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)), url("../images/header.jpg");
  background-repeat: no-repeat;
  background-position: 40% 0%;
  padding: 7em 0 0.1em 1em;
  border-bottom: solid 0.5em #0e2951;
}
.header h2 {
  color: #ffffff;
  font-size: 3em;
  margin-top: 0;
  display: inline-block;
}
.header h3 {
  color: #94b7ec;
  font-size: 1.5em;
  margin-top: -1em;
}
.lang-icon-container {
  width: 30%;
  margin-left: 78%;
  display: inline-block;
}
.lang-icon {
  width: 30%;
}
/********************************************
MENU
********************************************/

.menucontainer {
  margin-top: 1em;
  float: left;
  width: 33.3333%;
  text-align: center;
}
.menucontainer p {
  font-size: 1.5em;
  margin: 0;
}
.menucontainer p.icon {
  font-size: 8em;
}
/********************************************
SKILLS
********************************************/

#skills {
  margin: 12em auto 0 auto;
}
.skills-header {
  background-color: #0e2951;
  color: #fff;
  font-size: 1.5em;
  padding: 0.1em 1em;
}
.skills-header.p {
  margin: 0;
}
.skills-container {
  background-color: #3d7ddd;
  color: #eaf1fb;
  width: 100%;
}
.skills-container ul {
  margin: 0;
  padding: 2em;
}
.skills-container li {
  list-style: none;
  margin: 0;
  font-size: 1.2em;
}
.skills-container li.break {
  margin-bottom: 1em;
}
.skills-container li.inline {
  display: inline-block;
  width: 49%;
  display: inline-block;
  text-align: center;
  font-size: 4em;
}
.skills-container li a.profile-icon {
  margin-top: 0.5em;
}
/********************************************
PORTFOLIO
********************************************/

.portfolio-header {
  background-color: #0e2951;
  color: #fff;
  margin: 1em 0 0 0;
  font-size: 1.5em;
  padding: 0.1em 0.5em;
}
.portfolio-header.p {
  margin: 0;
}
.portfolio-container {
  margin: 0 0 1.5em 0;
  background-color: red;
  background-color: #3d7ddd;
}
.portfolio-container ul {
  margin: 0;
  list-style: none;
  padding: 1em;
}
.portfolio-container li {
  width: 80%;
  margin: 1em auto;
}
.portfolio-container li p {
  margin: 0;
  background-color: #b1caf1;
  color: #0e2951;
  text-align: center;
  padding: 0.5em;
  font-size: 1.2em;
}
.portfolio-image {
  max-width: 100%;
}
/********************************************
CONTACT
********************************************/

#contact {
  border-top: solid 0.5em #0e2951;
  border-bottom: solid 0.5em #0e2951;
  background-color: #fff;
  padding-top: 1em;
}
.contact-icon-box {
  width: 32.5%;
  display: inline-block;
  text-align: center;
}
.contact-icon-link {
  width: 1em;
  margin: 0 auto;
  text-align: center;
  background-color: #3d7ddd;
  border-radius: 150px;
  font-size: 5em;
}
#contact p,
#contact #tablet-phone p {
  padding: 1em 2em;
  margin-top: 1em;
}
#tablet-phone,
#facebook-tablet,
#email-tablet {
  display: none;
}
#tablet-phone p {
  margin: 0 auto;
}
/********************************************
FOOTER
********************************************/

footer {
  text-align: center;
}
.back-to-top {
  margin-top: 2em;
}
.back-to-top p {
  font-size: 2em;
  background-color: #3d7ddd;
  border-radius: 150px;
  width: 2em;
  margin: 0 auto;
  margin-bottom: 0.2em;
}
.copyright {
  margin: 2em 0;
  font-size: 0.9em;
}
/********************************************
TABLET ADJUSTMENTS
********************************************/

@media screen and (min-width: 768px) {
  /********************************************
	CONTACT ADJUSTMENTS
	********************************************/
  #mobile-phone {
    display: none;
  }
  #tablet-phone,
  #facebook-tablet,
  #email-tablet {
    display: inline-block;
  }
  #tablet-phone {
    color: #94b7ec;
  }
}
/********************************************
LAPTOP ADJUSTMENTS
********************************************/

@media screen and (min-width: 992px) {
  body {
    margin: 0 5%;
  }
  /********************************************
	PORTFOLIO
	********************************************/
  .portfolio-header {
    background-color: #0e2951;
    color: #fff;
    margin: 1em 0 0 0;
    font-size: 1.5em;
    padding: 0.1em 0.5em;
  }
  .portfolio-header.p {
    margin: 0;
  }
  .portfolio-container {
    margin: 0 0 1.5em 0;
    background-color: red;
    background-color: #3d7ddd;
  }
  .portfolio-container ul {
    margin: 0;
    list-style: none;
  }
  .portfolio-container li {
    width: 40%;
    margin: 1em 4.8%;
    display: inline-block;
  }
  .portfolio-container li p {
    background-color: #b1caf1;
    color: #0e2951;
    text-align: center;
    font-size: 1.2em;
    padding: 0;
  }
  .portfolio-image {
    margin: 0 auto;
  }
}
/********************************************
DESKTOP ADJUSTMENTS
********************************************/

@media screen and (min-width: 1200px) {
  body {
    margin: 0 15%;
  }
}

＆＃13;

Answer 1

如果您想通过脚本在新标签页中打开链接，只需使用'_blank'参数：

  $('#skills a').click(function() {
    window.open($(this).attr('href'), '_blank');
    return false;
  });

Answer 2

只需设置目标属性..

 $(document).ready(function {
      $('#skills a').attr('target', '_blank');
 });

或者只是将其添加到html中，例如

<a href="#skills" target="_blank">...

尝试使用jQuery在另一个窗口中打开锚点

2 个答案: