点击另一个锚点时，触发点击一个锚点 [英] Trigger click on one anchor when another is clicked

查看：118
本文介绍了点击另一个锚点时，触发点击一个锚点的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

HTML： 

 < section class =space_between> 
< h3 class =center_rounded_ol>人对人建议< / h3> 
 
    < li> 
    < a href =javascript：id =fooonClick =burn（）>名字姓氏< / a> 
    < / li> 
     
    < / ol> 
    < / section> 
     
    < nav class =nav-fillpath> 
    < a class =nextonClick =load（）> 
    < span class =icon-wrap>< / span> 
    < h3>< strong> Alexis< / strong>齐普拉斯< / H3> 
    < / a> 
    < / nav>

JavaScript： 

  function load（）{
 $（＃foo）。tigger（'click'）; 
 
函数burn（）{
 $（this）.css（color，red）; 
}


解决方案

方式： JS小提琴


$ b （'click'），函数（）{
$（＃foo）。trigger（'click'）$ b 

  $（'。next'）。 ; 
}）; $（'＃foo'）。on（'click'，function（）{
 $（this）.css（color，red）; 
}）; 
  

 <$ （'click'，function（）{$（＃foo）。trigger（'click'）;}）; $（'＃foo'）。on 'click'，function（）{$（this）.css（color，red）;}）;  

  nav a {position：absolute;顶部：50％;显示：块;概要：无; 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;保证金：0汽车; padding：0;} / * -------------------- * // * Fillpath（http://www.nizuka.fr/ )*//*-- ------------------ * /。color-10 {background：＃f3cf3f;}。nav-fillpath a {width：100px; height：100px;}。nav-fillpath .icon-wrap {position：relative;显示：块;宽度：100％; nav-fillpath a :: before，.nav-fillpath a :: after，.nav-fillpath .icon-wrap :: before，.nav-fillpath .icon-wrap :: after {position：height：100％;}绝对;剩下：50％;宽度：3px;身高：50％;背景：＃566475;内容：''; -webkit-transition：-webkit-transform 0.3s;过渡：变换0.3s; -webkit-backface-visibility：hidden; back-visibility：hidden;}。nav-fillpath .icon-wrap :: before，.nav-fillpath .icon-wrap :: after {z-index：100;身高：0;背景：#fff; -webkit-transition：高度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％）旋转（-135deg）; transform：translateX（-50％）旋转（-135deg）; -webkit-transform-origin：50％0％; nav-fillpath a.next::before,.nav-fillpath a.next .icon-wrap :: before {-webkit-transform：translateX（-50％）rotate（135deg）转换源：50％0％;}。 ）; 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％）旋转（-45deg）; transform：translateX（-50％）旋转（-45deg）; -webkit-transform-origin：0 0; （-50％）rotate（45deg）; 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;顶部：50％;保证金：0;颜色：#fff;文字转换：大写; font-weight：300; font-size：0.85em;不透明度：0; -webkit-transition：-webkit-transform 0.3s，不透明度0.3s; transition：转换0.3s，不透明度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）;转换：translateX（-50％）rotate（-125deg）;}。nav-fillpath a.next:hover::before,.nav-fillpath a.next:hover .icon-wrap :: before {-webkit-transform： translateX（-50％）旋转（125deg）;转换：translateX（-50％）rotate（125deg）;}。nav-fillpath a：hover :: after，.nav-fillpath a：hover .icon-wrap :: after {-webkit-transform：translateX（-50％ ）旋转（-55度）;转换：translateX（-50％）rotate（-55deg）;}。nav-fillpath a.next:hover::after,.nav-fillpath a.next:hover .icon-wrap :: after {-webkit-transform： translateX（-50％）旋转（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％;转化来源：100％50％; } .nav-slide a，.nav-reveal a，.nav-doubleflip a，.nav -fillslide a {-webkit-transform：scale（0.6）;变换：比例（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>人对人建议< / h3> < ol class =rounded-list center_rounded_ol> <李> < a href =id =foo>名字姓氏< / a> < /锂> < / ol>< / section>< nav class =nav-fillpath> < a class =next> < span class =icon-wrap>< / span> < H3><强>亚历< /强>齐普拉斯< / H3> < / a>< / nav>

更新：使用这个更好，因为这样你可以将所有的javascript分隔在 .js 或< script> ，而不是将它分散在DOM元素上，这样保持HTML干净，就像内联CSS和外部CSS一样。除此之外，您可以轻松附加多个活动。



这篇文章 jQuery.click（）vs onClick 有更详细的答案。


When I click on the link, I would like the link to be also clicked. However, nothing happens with my code, see 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");
}

解决方案

I personally prefer writing it this way: 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>

Update: using this is better because this way you separate your javascript all in .js or <script> instead of having it scattered on DOM elements so keep the HTML "clean", something like the inline CSS vs external CSS. Beside doing it this way you can easily attach more than one event..

This post jQuery.click() vs onClick has more detailed answer.

这篇关于点击另一个锚点时，触发点击一个锚点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆