爲什麼我的<a>標籤選擇不起作用？

我有這樣的代碼：爲什麼我的<a>標籤選擇不起作用？

<div class="list-group" id="generalView"> 
    <a href="" id="today" onclick="displayData()" class="list-group-item" data-toggle="modal" data-target="#displayDiary"> 
     <h4 class="list-group-item-heading">Today's Diary</h4> 
    </a> 
    <a href="" class="list-group-item"> 
     <h4 class="list-group-item-heading">Last Week's Diaries</h4> 
    </a> 
    <a href="" class="list-group-item"> 
     <h4 class="list-group-item-heading">Last Month's Diaries</h4> 
    </a> 
</div>

$('#generalView > a').click(function(e) { 
    e.preventDefault(); 
    $('#generalView > a').removeClass('active'); 
    $(this).addClass('active'); 
});

我想點擊一個<a>標籤，但我選擇不工作時添加一個類active。我選擇錯了嗎？我已經嘗試給每個<a>元素分配一個類，然後嘗試選擇該類，但是不能很好地工作。這是爲什麼發生？

來源

2016-11-12 G. Rocha

您的代碼似乎好工作：HTTPS： // jsfi ddle.net/ejfxa4jL/。請注意，您需要對傳遞給處理函數的事件調用'preventDefault（）'，否則頁面將被傳輸並且狀態將會丟失。如果你想保持頁面之間的狀態，那麼你需要將選擇存儲在某個地方，例如。在URL中作爲querystring參數，'localStorage'，'sessionStorage'，一個cookie，服務器端會話或數據存儲。 –

你正在編輯的問題比我能寫出的答案更快 - 在某一點上它沒問題 - 就我所見，選擇器沒有問題。唯一的問題是，你可能想爲'addClass'調用'$（this）'而不是每個''標籤都是'＃generalView'的子標籤。如果你有任何疑問，只需在控制檯上測試它們頁面你不確定 - 不需要使用提醒:)。道歉，如果這是現在不太相關，但編輯！ – Brian

這聽起來很合理，我試過但沒有奏效。裏面的代碼不工作。我甚至試圖只選擇''標籤，並且不起作用。看起來像即使我打電話'preventDefault（）'代碼只是不工作 –

下面是一個簡單的解決方案，在每個標籤上使用一個類。希望能幫助到你！

$(document).ready(function(){ 
 
    $('#generalView > a').click(function() { 
 
    $('.myClass').removeClass('active'); 
 
    $(this).addClass('active'); 
 
    return false; 
 
}); 
 

 
});

.active { 
 
    color: red; 
 
}

<script type = "text/javascript" 
 
     src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<div class="list-group" id="generalView"> 
 
    <a href="" id="today" onclick="displayData()" class="list-group-item myClass" data-toggle="modal" data-target="#displayDiary"> 
 
     <h4 class="list-group-item-heading">Today's Diary</h4> 
 
    </a> 
 
    <a href="" class="list-group-item myClass"> 
 
     <h4 class="list-group-item-heading">Last Week's Diaries</h4> 
 
    </a> 
 
    <a href="" class="list-group-item myClass"> 
 
     <h4 class="list-group-item-heading">Last Month's Diaries</h4> 
 
    </a> 
 
</div>

來源

2016-11-12 22:14:50 HenryDev

正如我在我的問題中說我已經嘗試過，並沒有工作：/但謝謝 –

@ G.Rocha我想我有點對你的問題感到困惑。因此，讓我們說你點擊鏈接1，然後這個鏈接應該是紅色的唯一鏈接。然後，如果你點擊鏈接2，那麼這個鏈接應該是隻有紅色的鏈接，等等......這就是你想要的嗎？因爲那就是我的代碼 – HenryDev

是的。我想這樣做。問題是選擇不起作用，所以我所有的JavaScript代碼都沒有運行。所以我想知道爲什麼選擇不起作用。 –

可以毫不JS做

考慮您的具體情況如下代碼

a:active { 
 
    color: orange; 
 
}

<script type = "text/javascript" 
 
     src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<div class="list-group" id="generalView"> 
 
    <a href="" id="today" class="list-group-item myClass" data-toggle="modal" data-target="#displayDiary"> 
 
     <h4 class="list-group-item-heading">Today's Diary</h4> 
 
    </a> 
 
    <a href="" class="list-group-item myClass"> 
 
     <h4 class="list-group-item-heading">Last Week's Diaries</h4> 
 
    </a> 
 
    <a href="" class="list-group-item myClass"> 
 
     <h4 class="list-group-item-heading">Last Month's Diaries</h4> 
 
    </a> 
 
</div>

來源

2016-11-12 23:09:00

爲什麼我的<a>標籤選擇不起作用？

回答

相關問題