jquery - 边框是可单击的，并且事件被触发，但是未遵循链接

我将这些项目符号作为指向下一页或上一页的链接：

FIDDLE DEMO



当我单击绿色圆圈内的黑色（或白色）部分时，将触发我的事件并跟随该链接，如果单击边框，则将触发以下事件，但未遵循该链接（类处于活动状态，但页面保持不变）

$('#listart, #litraining, #lihotels').click(function () {
  $(this).addClass('current-page-item');
  $('li').not(this).removeClass('current-page-item');
});

#bullets{
  position:fixed;
  top:40%;
  left:0;
  display:table;
  width:80px;
  z-index:0,
    cursor:pointer
}

#bullets ul{
  padding-left:0;
  display:table-cell;
  vertical-align:middle
}

#bullets ul li{
  border-width:2px;
  border-style:solid;
  border-color:transparent;
  width:14px;
  height:14px;
  margin:14px auto;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  -webkit-transition:border-color .3s linear;
  -moz-transition:border-color .3s linear;
  -o-transition:border-color .3s linear;
  transition:border-color .3s linear
}

#bullets ul li a{
  display:block;
  position:relative;
  width:10px;
  height:10px;
  background-color:silver;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  text-indent:-9999px;
  -webkit-transition:border .3s linear;
  -moz-transition:border .3s linear;
  -o-transition:border .3s linear;
  transition:border .3s linear
}

#bullets ul li.current-page-item a{
  background-color:transparent
}

#bullets ul li.current-page-item,#bullets ul li:hover{
  border-color:darkgreen;
}

#bullets ul li:hover a{
  background-color:transparent
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav id="bullets" class="cover">
  <ul>
    <li class="current-page-item" id="listart"><a href='#'>start</a></li>
    <li id="lihotels"><a href='#'>hotels</a></li>
    <li id="litraining"><a href='#'>training</a></li>


  </ul>
</nav>

有人有主意吗？

最佳答案

它不起作用，因为LI元素上有绿色边框。

您可以并且仅对模式感到抱歉（由于时间的原因，也许我以后会在这里放一个代码），将边框设置为A。

HTML标记：

 <li>
     <a href=""><span></span></a>
 </li>
 <li>
     <a href=""><span></span></a>
 </li>
 <li>
     <a href=""><span></span></a>
 </li>

的CSS

a {border: 2px solid transparent;}
a:hover {border-color: green}
span {border: 2px solid grey; border-radius: ...}

关于jquery - 边框是可单击的，并且事件被触发，但是未遵循链接，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27077651/