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

Question

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

我将整个内容发布为 sn-p，而不仅仅是严格相关的代码，以防我遗漏了一些明显的东西，比如链接 jQuery 错误或一些随机的 css 缺陷。

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

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

/********************************************
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%;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Miha Šušteršič</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,700&amp;ssubset=latin-ext' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/ionicons.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <header>
    <div class="header" id="header">
      <div class="lang-icon-container">
        <a href="index_en.html">
          <img class="lang-icon" src="images/UnitedKingsom.png" alt="english flag">
        </a>
        <a href="index.html">
          <img class="lang-icon" src="images/Slovenia.png" alt="slovenian flag">
        </a>
      </div>
      <h2>Miha Šušteršič</h2>
      <h3>Web developer/designer</h3>
    </div>
  </header>

  <section id="menu">
    <a href="#skills">
      <div class="menucontainer">
        <p class="icon ion-code-working"></p>
        <p>Skills</p>
      </div>
    </a>
    <a href="#porfolio">
      <div class="menucontainer">
        <p class="icon ion-document"></p>
        <p>Portfolio</p>
      </div>
    </a>
    <a href="#contact">
      <div class="menucontainer">
        <p class="icon ion-ios-email"></p>
        <p>Contact</p>
      </div>
    </a>
  </section>

  <section id="skills">
    <div class="skills-header">
      <p>Hello World! I can code:</p>
    </div>
    <div class="skills-container">
      <ul>
        <li>&lt; html5 &gt;</li>
        <li>{ css3 }</li>
        <li>javascript.js</li>
        <li class="break">$(jQuery)</li>
        <li class="break">&lt;%= rails 4 %&gt;</li>
        <li class="break">&lt; div class="bootstrap" &gt;</li>
        <li class="break">$ sudo apt-get update</li>
        <li class="inline">
          <a href="https://si.linkedin.com/pub/miha-šušteršič/b2/60/654" class="profile-icon ion-social-linkedin"></a>
        </li>
        <li class="inline">
          <a href="https://github.com/Shooshte" class="profile-icon ion-social-github"></a>
        </li>
      </ul>
    </div>
  </section>

  <section id="porfolio">
    <div class="portfolio-header">
      <p>Some of my recent work</p>
    </div>
    <div class="portfolio-container">
      <ul>
        <li>
          <a href="http://zic.herokuapp.com/">
            <img class="portfolio-image" src="images/ZIC-screenshot.png" alt="ZIC Homepage">
          </a>
          <p>Renovated an old library Homepage.</p>
        </li>
        <li>
          <a href="http://www.topdeckandwreck.com/grafiIJS/">
            <img class="portfolio-image" src="images/grafi-screenshot.jpg" alt="Javascript Interactive Graphs">
          </a>
          <p>Interactive JS Graphs made from MS excel tables.</p>
        </li>
      </ul>
    </div>
  </section>

  <section>

    <div id="contact">
      <div class="contact-icon-box">
        <a href="https://www.facebook.com/miha.sustersic.5">
          <div class="contact-icon-link ion-social-facebook">
          </div>
          <p id="facebook-tablet">Miha Šušteršič</p>
        </a>
      </div>

      <div class="contact-icon-box" id="mobile-phone">
        <a href="tel:+38631535919">
          <div class="contact-icon-link ion-ios-telephone">
          </div>
        </a>
      </div>

      <div class="contact-icon-box" id="tablet-phone">
        <div class="contact-icon-link ion-ios-telephone">
        </div>
        <p>+386 31535919</p>
      </div>

      <div class="contact-icon-box">
        <a href="mailto:sustersic_miha@hotmail.com">
          <div class="contact-icon-link ion-email">
          </div>
          <p id="email-tablet">sustersic_miha@hotmail.com</p>
        </a>
      </div>
      <p>I am currently looking for design and/or development work. If interested, contact me using facebook or email. Please only use phone contact when urgent.</p>
    </div>

  </section>

  <footer>
    <a href="#header">
      <div class="back-to-top">
        <p class="ion-chevron-up"></p>
        Back to Top
      </div>
    </a>
    <div class="copyright">
      &copy; Miha Šušteršič, 2015
    </div>
  </footer>
  <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="js/index.js"></script>
</body>

</html>

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">...