Question

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

enter image description here

当我点击绿色圆圈内的黑色（或白色）部分时，我的事件被触发并且链接被跟踪，如果我点击边框，下面的事件被触发但链接没有被跟踪（ class变为活动但页面保持不变）

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

有人有想法吗？

Answer 1

它不起作用，因为绿色边框位于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: ...}

Answer 2

＆＃13;

$('#bullets').on('click.bullet','li',function () {
  $('li').removeClass('current-page-item');
  $(this).addClass('current-page-item');
});

＆＃13;

#bullets {
  position:fixed;
  top:40%;
  left:0;
  width:60px;
  z-index:0,
  cursor:pointer;
  background: #212121;
  padding: 30px 2px
}

#bullets ul {
  padding-left:0;
  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:50%;
  -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; 
  margin: -2px;
  border-width:2px;
  border-style:solid;
  border-color:#212121;
  width:14px;
  height:14px;
  background-color:#bfbfbf;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:50%;
  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 a,
#bullets ul li:hover {
  border-color:#006300;
}

#bullets ul li:hover a {
  opacity: 0;
}

#start, #end {
  background: #ddd;
  padding: 50px;
  padding-bottom: 500px;
  margin: 20px;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body>
    <nav id="bullets" class="cover">
      <ul>
        <li class="current-page-item" id="listart">
          <a href='#start'>start</a>
        </li>
        <li id="lihotels">
          <a href='http://pt.wikipedia.org/wiki/Hotel'>hotels</a>
        </li>
        <li id="litraining">
          <a href="http://www.google.com" target="_blank">training</a>
        </li>
        <li id="lihome">
          <a href='/'>home</a>
        </li>
        <li id="liend">
          <a href='#end'>end</a>
        </li>        
      </ul>
    </nav>
    <div>
      <h1 id="start" >Start</h1>
      <h1 id="end" >End</h1>
    </div>
  </body>
</html>

＆＃13;

边框是可点击的，事件被触发，但链接没有被遵循

2 个答案: