邊界是可以點擊的，事件被觸發，而不是跟着鏈接

Question

我的這些子彈爲紐帶，下一首或上頁：

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>

是否有人有想法？

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

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

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

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