javascript - 单击一个 anchor 时触发单击另一个 anchor

Question

当我点击链接时，我希望链接也被点击。但是，我的代码没有任何反应，请参阅 fiddle .

HTML:

<section class="space_between">
  <h3 class="center_rounded_ol">Man-to-man suggestions</h3>
    <ol class="rounded-list center_rounded_ol">
      <li>
        <a href="javascript:" id="foo" onClick="burn()">Name Surname</a>
      </li>

    </ol>
</section>

<nav class="nav-fillpath">
  <a class="next" onClick="load()">
    <span class="icon-wrap"></span>
    <h3><strong>Alexis</strong> Tsipras</h3>
  </a>      
</nav>

JavaScript:

function load() {
  $("#foo").tigger('click');
}
function burn() {
  $(this).css("color", "red");
}

Answer 1

我个人更喜欢这样写:JS Fiddle

$('.next').on('click', function() {
    $("#foo").trigger('click');
});
$('#foo').on('click', function() {
   $(this).css("color", "red");
});

$('.next').on('click', function() {
  $("#foo").trigger('click');
});
$('#foo').on('click', function() {
  $(this).css("color", "red");
});

nav a {
  position: absolute;
  top: 50%;
  display: block;
  outline: none;
  text-align: left;
  z-index: 1000;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
nav a.prev {
  left: 0;
}
nav a.next {
  right: 0;
}
nav a svg {
  display: block;
  margin: 0 auto;
  padding: 0;
}
/*--------------------*/

/* Fillpath (http://www.nizuka.fr/)*/

/*--------------------*/

.color-10 {
  background: #f3cf3f;
}
.nav-fillpath a {
  width: 100px;
  height: 100px;
}
.nav-fillpath .icon-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.nav-fillpath a::before,
.nav-fillpath a::after,
.nav-fillpath .icon-wrap::before,
.nav-fillpath .icon-wrap::after {
  position: absolute;
  left: 50%;
  width: 3px;
  height: 50%;
  background: #566475;
  content: '';
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.nav-fillpath .icon-wrap::before,
.nav-fillpath .icon-wrap::after {
  z-index: 100;
  height: 0;
  background: #fff;
  -webkit-transition: height 0.3s, -webkit-transform 0.3s;
  transition: height 0.3s, transform 0.3s;
}
.nav-fillpath a::before,
.nav-fillpath .icon-wrap::before {
  top: 50%;
  -webkit-transform: translateX(-50%) rotate(-135deg);
  transform: translateX(-50%) rotate(-135deg);
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}
.nav-fillpath a.next::before,
.nav-fillpath a.next .icon-wrap::before {
  -webkit-transform: translateX(-50%) rotate(135deg);
  transform: translateX(-50%) rotate(135deg);
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}
.nav-fillpath a::after,
.nav-fillpath .icon-wrap::after {
  top: 50%;
  -webkit-transform: translateX(-50%) rotate(-45deg);
  transform: translateX(-50%) rotate(-45deg);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.nav-fillpath a.next::after,
.nav-fillpath a.next .icon-wrap::after {
  -webkit-transform: translateX(-50%) rotate(45deg);
  transform: translateX(-50%) rotate(45deg);
  -webkit-transform-origin: 100% 0%;
  transform-origin: 100% 0%;
}
.nav-fillpath h3 {
  position: absolute;
  top: 50%;
  margin: 0;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 0.85em;
  opacity: 0;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
}
.nav-fillpath a.prev h3 {
  left: 100%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
}
.nav-fillpath a.next h3 {
  right: 100%;
  text-align: right;
  -webkit-transform: translateY(-50%) translateX(50%);
  transform: translateY(-50%) translateX(50%);
}
.nav-fillpath a:hover .icon-wrap::before,
.nav-fillpath a:hover .icon-wrap::after {
  height: 50%;
}
.nav-fillpath a:hover::before,
.nav-fillpath a:hover .icon-wrap::before {
  -webkit-transform: translateX(-50%) rotate(-125deg);
  transform: translateX(-50%) rotate(-125deg);
}
.nav-fillpath a.next:hover::before,
.nav-fillpath a.next:hover .icon-wrap::before {
  -webkit-transform: translateX(-50%) rotate(125deg);
  transform: translateX(-50%) rotate(125deg);
}
.nav-fillpath a:hover::after,
.nav-fillpath a:hover .icon-wrap::after {
  -webkit-transform: translateX(-50%) rotate(-55deg);
  transform: translateX(-50%) rotate(-55deg);
}
.nav-fillpath a.next:hover::after,
.nav-fillpath a.next:hover .icon-wrap::after {
  -webkit-transform: translateX(-50%) rotate(55deg);
  transform: translateX(-50%) rotate(55deg);
}
.nav-fillpath a:hover h3 {
  opacity: 1;
  -webkit-transform: translateY(-50%) translateX(0);
  transform: translateY(-50%) translateX(0);
}
@media screen and (max-width: 520px) {
  .nav-slide a.prev,
  .nav-reveal a.prev,
  .nav-doubleflip a.prev,
  .nav-fillslide a.prev,
  .nav-growpop a.prev {
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
  }
  .nav-slide a.next,
  .nav-reveal a.next,
  .nav-doubleflip a.next,
  .nav-fillslide a.next,
  .nav-growpop a.next {
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
  }
  .nav-slide a,
  .nav-reveal a,
  .nav-doubleflip a,
  .nav-fillslide a {
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
  }
  .nav-growpop a {
    -webkit-transform: translateY(-50%) scale(0.6);
    transform: translateY(-50%) scale(0.6);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section class="space_between">
  <h3 class="center_rounded_ol">Man-to-man suggestions</h3>
  <ol class="rounded-list center_rounded_ol">
    <li>
      <a href="" id="foo">Name Surname</a>
    </li>

  </ol>
</section>

<nav class="nav-fillpath">
  <a class="next">
    <span class="icon-wrap"></span>
    <h3><strong>Alexis</strong> Tsipras</h3>
  </a>
</nav>

---

更新:使用这个更好，因为这样你就可以在 .js 中分离你的 javascript或 <script>不要让它分散在 DOM 元素上，所以要保持 HTML“干净”，就像内联 CSS 与外部 CSS 一样。除了以这种方式进行之外，您还可以轻松地附加多个事件..

此帖 jQuery.click() vs onClick 有更详细的答案。