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

load（）函数中存在拼写错误：

function load() {
  $("#foo").trigger('click'); //'r' was missing
}

请注意

$(this)

inside burn（）函数返回窗口实例，那是你期望的吗？

如果您想要更改点击链接的颜色，请输入HTML代码（添加通知事件参数）：

<a href="javascript:" id="foo" onclick="burn(this)">Name Surname</a>

和js：

function burn(element) {
  $(element).css("color", "red");
}

此解决方案包含＆＃39;此＆＃39;允许你为更多的链接重用burn（）函数，它不会将你绑定到#foo elemenent。

Answer 2

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

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

＆＃13;

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

＆＃13;

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);
  }
}

＆＃13;

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

＆＃13;

<强>更新使用它更好，因为这样你就可以在.js或<script>中分离你的所有javascript而不是将它分散在DOM元素上，所以保持HTML＆＃34; clean＆＃34 ;,就像内联CSS一样vs外部CSS。除此之外，您可以轻松地附加多个活动..

这篇文章 jQuery.click() vs onClick 有更详细的解答。

单击另一个时，触发单击一个锚点

2 个答案: