click li 以外的，不做動作

jquery javascript html css ajax

rr8r8r8r8tw 2017-03-29 12:21:51 ‧ 11358 瀏覽

分享至

<li><a href="/html/Left-List/SystemLeftList.html" >a setting</a></li>
<li><a href="/html/Left-List/SystemLeftList.html">b Setting</a></li>
<li><a href="/html/Left-List/SystemLeftList.html">c Setting</a></li>

如何寫click a setting 以外的li 都不動作

即點a有動作，b、c無動作

看更多先前的討論...收起先前的討論...

froce iT邦大師 1 級 ‧ 2017-03-29 12:54:11 檢舉

jQuery的話，給a一個id就結案了。

rr8r8r8r8tw iT邦新手 5 級 ‧ 2017-03-29 14:43:31 檢舉

換個方式，如果click a刪除後面b,c
click b刪除c，這樣呢

rr8r8r8r8tw iT邦新手 5 級 ‧ 2017-03-29 14:44:15 檢舉

click c 後面沒東西，等於刪除空的

窮嘶發發發 iT邦高手 1 級 ‧ 2017-03-30 10:24:38 檢舉

基本上，可以做，每個項目都要給 ID，然後用JS 去作動
假如點了 B 那 AC 就給他寫入 display:none; 不顯示
這樣就行了，透過 css + JS 能作的變化多，雖然實際上仍然存在
但是，使用者除非看原始碼，不然他是看不到暗藏的選項的

登入發表討論

熱門推薦

{{ item.channelVendor }} | {{ item.webinarstarted }} |

直播中

3 個回答

froce

iT邦大師 1 級 ‧ 2017-03-29 16:26:04

最佳解答

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>測試</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script
              src="https://code.jquery.com/jquery-1.12.4.js"
              integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
              crossorigin="anonymous">
        </script>
    </head>
    <body>
        <ul>
          <li class="test"><a href="/html/Left-List/SystemLeftList.html" >a setting</a></li>
          <li class="test"><a href="/html/Left-List/SystemLeftList.html">b Setting</a></li>
          <li class="test"><a href="/html/Left-List/SystemLeftList.html">c Setting</a></li>
        </ul>
    </body>
</html>
<script>
  $('.test').click(function(){
    var index = $(this).index();
    var n = $('.test').length;
    for (var i = index+1; i < n; i++){
      $('.test').eq(i).empty();
    }
  });
</script>

看不懂你要的動作是什麼，用清空li的內容來代替好了。
增加class在實際上寫網頁會比較實用。
不管你有幾個li，點第n個，n+1以後的都會清空。

回應 2
分享
檢舉

rr8r8r8r8tw iT邦新手 5 級 ‧ 2017-03-29 16:26:46 檢舉

我想要做像這個網站的麵包屑，不知我的方向對不對

froce iT邦大師 1 級 ‧ 2017-03-29 16:39:43 檢舉

...你確定要把密碼放在上面嗎？
你如果是要像那樣的話，把我的code的empty()改成remove()應該就是你要的效果。

登入發表回應

king742171

iT邦新手 2 級 ‧ 2017-03-29 15:37:57

<a id="link_a" href="javascript:alink(a);">a setting</a>
<a id="link_b" href="javascript:alink(b);">b setting</a>
<a id="link_c" href="javascript:alink(c);">c setting</a>

function alink(str) {
    if (str == a) {
        document.getElementId("link_b").remove();
        document.getElementId("link_c").remove();
    } elseif (str == b) {
        document.getElementId("link_c").remove();
    } else {
    }
}

不知道語法對不對~
但...大概方向如此~給你參考~