单击另一个时，触发单击一个锚点
当我点击链接时，我希望链接也被点击。 但是，我的代码没有任何反应，请参阅小提琴 。
HTML：
Man-to-man suggestions
JavaScript的：
function load() { $("#foo").tigger('click'); } function burn() { $(this).css("color", "red"); }
我个人更喜欢这样写： 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); } }
Man-to-man suggestions
load（）函数中有一个拼写错误：
function load() { $("#foo").trigger('click'); //'r' was missing }
请注意
$(this)
inside burn（）函数返回窗口实例，那是你所期待的吗？
如果你想改变点击链接的颜色，这里是一个HTML代码（添加了通知事件参数）：
Name Surname
和js：
function burn(element) { $(element).css("color", "red"); }
这个带有’this’的解决方案允许你重复使用burn（）函数来获得更多的链接，它不会将你绑定到#foo elemenent。