如何使用css控件專注於單擊href鏈接時的div背景

我試圖將:focus放在div上，因此當單擊href鏈接時它將使用其他顏色進行對焦，是否有可能？任何幫助，將不勝感激。如何使用css控件專注於單擊href鏈接時的div背景

下面是我目前的進展

eg:Fiddle Demo

預期的結果，當點擊HREF鏈接，它將重點放在DIV背景（如懸停做）。

enter image description here

我不知道如何將其轉換爲JavaScript的

$("#colOne ul li").click(function(){ 
$("#colOne ul li").removeClass("active"); 
$(this).addClass("active") 
})

來源

2015-03-31 user3835327

你能解釋一下你想要什麼嗎？如果你正試圖獲得焦點，你可以使用一個元素：active。 – Aru 2015-03-31 04:15:03

hi @Aru，問題用例子更新。從這個例子中你可以看到，當鼠標懸停到href鏈接div背景變成淺綠色。是的，當我點擊href鏈接時，即使當我使用鼠標時，它也會將焦點放在淺綠色上。 – user3835327 2015-03-31 04:22:58

您需要li操作，因此您需要使用Jquery或Javascript。
使用以下JavaScript將解決您的問題。

HTML：

<div id="colOne"> 
    <h3>Fruit</h3> 
    <div class="bg1"> 
     <ul> 
      <li class="litest"><a href="" target="entryFrame">Apple</a></li> 
      <li class="litest"><a href="" target="entryFrame">Orange</a></li> 
      <li class="litest"><a href="" target="entryFrame">Banana</a></li> 
     </ul> 
     </div> 
</div>

的Javascript：

<script language="javascript"> 
var buttons = document.getElementsByClassName("litest"); 

for(var i = 0; i < buttons.length; ++i){ 

    buttons[i].onmousedown = function() { 
     this.setAttribute("class", "active"); 
    } 
} 
</script>

可以使用this.classList.toggle('active');代替this.setAttribute("class", "active");添加和刪除的效果。

檢查Fiddle。

如果你喜歡使用jQuery使用下面的jQuery代碼：

$(function(){ 
    $("li").bind("click", function(){ 
     $(this).addClass('active'); 
    }); 
});

編輯：

在這裏，我編輯我的小提琴按您的要求。

支票Fiddle.

來源

2015-03-31 05:12:51 ketan

嗨@ketan，解決方案是如此接近，但唯一的問題是，當我點擊第二個項目，它也會激活第二個項目..假設它應該在第二個項目和第一個項目將釋放活動.. – user3835327 2015-03-31 06:18:49

@ user3835327在我編輯的答案中檢查更新小提琴。 – ketan 2015-03-31 06:26:23

嗯..我得到這行代碼'var buttons = document.getElementById（「colOne」）。getElementsByTagName（「li」）;'無法獲取屬性'getElementsByTagName'未定義或空引用 – user3835327 2015-03-31 06:44:05

這聽起來像您是否想在李的，而不是一個事件監聽器：focus僞類。如果您設置了幾個課程以反映您想要的顏色，您可以在點擊之間切換它們。我建議jQuery's toggleClass完成這項工作。

來源

2015-03-31 04:45:34 jmargolisvt

嗨，有沒有可能在JavaScript？因爲我不能導入jquery lib我的當前程序 – user3835327 2015-03-31 04:55:35

如何使用css控件專注於單擊href鏈接時的div背景

回答

相關問題