JQuery：是否可以設置<a>標籤樣式以改變點擊？

Question

行 - 我知道這可能是一個遠射，但我想知道：

我有一些標籤鏈接到其他網頁，基本上我想他們周圍的樣式改變，當用戶點擊它們（所以如果用戶按住鼠標鍵3秒鐘，他們可以看到樣式改變）。

到目前爲止，我有：

$(function() { 

//MOUSE CLICK EVENTS 
$('#mainmenu a').click(function() { 
      $('#mainmenu li').addClass("menupressed"); 
}); 

});//END ONLOAD 

但它不工作。這可能嗎？我在正確的軌道上嗎？

任何意見將不勝感激！感謝

編輯：標記爲請求：

  <div class="content"> 
       <ul class="mainmenu"> 
        <a href="page1.html"><li>Page1</li></a> 
        <a href="page2.html"><li>Page2</li></a> 
        <a href="page3.html"><li>Page3</li></a> 
       </ul>  
      </div><!--content--> 

Answer 1

基於你問題中的標記，你需要引用容器的類，而不是它的id，因爲它沒有。

如果你想這樣做就點擊：

$('.mainmenu a').click(function() { 
      $('li', this).addClass("menupressed"); 
}); 

如果鼠標按下：

$('.mainmenu a').mousedown(function() { 
    $('li', this).addClass("menupressed"); 
}); 

Answer 2

假設

標記

<ul><li><a></li>...</ul> 

$(function() { 
    $('#mainmenu a').on('click', function() { 
    $(this).parent().addClass("menupressed"); 
    }); 
}); 

Answer 3

當按下鼠標按鈕，然後釋放被觸發的事件click。如上所述，如果您希望能夠在用戶「按住鼠標按鈕3秒」時看到更改，則應使用mousedown事件。

您可以在各自的jQuery的頁面比較兩種行爲：

http://api.jquery.com/click/

http://api.jquery.com/mousedown/

但是請記住，如果用戶按住鼠標左鍵，然後將鼠標移動錨外元素和然後釋放它，鏈接將不會被點擊。

Answer 4

要將點擊添加到您的具體<a>元素，只是失去了內部選擇：

$('#mainmenu a').click(function() { 
    this.addClass('menupressed'); 
}); 

如果您需要將類添加到下一個<li>父元素：

$('#mainmenu a').click(function() { 
    this.closest('li').addClass('menupressed'); 
}); 

此用途.closest()方法，在這裏找到：http://api.jquery.com/closest/

Answer 5

這將添加類，如果持續3秒。

編輯帶班工作

var hammertime=0; 
$('.mainmenu a').bind('mousedown',function() { 
    hammertime= window.setTimeout((function(elem){ 
    return function(){ 
     elem.addClass("menupressed"); 
    } 
    })($(this).children('li')),3000) // Edit: If li is child, then use children('li') 
}) 
.bind('mouseup',function() { 
    window.clearTimeout(hammertime); 
}) 

編輯：

$(document).ready(function(){ 
    /* the code here */ 
}); 

Answer 6

，你可以：

還要確保整個包住事情是，要在負載執行使用CSS在鏈接變爲活動時更改鏈接的樣式

在這裏看到一個例子：http://www.w3schools.com/css/tryit.asp?filename=trycss_link

a:link {color:#FF0000;} /* unvisited link */ 
a:visited {color:#00FF00;} /* visited link */ 
a:hover {color:#FF00FF;} /* mouse over link */ 
a:active {color:#0000FF;} /* selected link */ 

所以一：主動是你需要做你要求什麼的人。所有需要完成的造型都可以放在那裏。

Answer 7

標記是無效的，你不應該通過內嵌一個包裹塊元素。

 <div class="content"> 
      <ul class="mainmenu"> 
       <li><a href="page1.html">Page1</a></li> 
       <li><a href="page2.html">Page2</a></li> 
       <li><a href="page3.html">Page3</a></li> 
      </ul>  
     </div><!--content--> 

還您是通過使用ID選擇中選擇一類，試試這個：

$(function() { 

//MOUSE CLICK EVENTS 
$('.mainmenu a').click(function() { 
    $(this).addClass("menupressed"); 
}) 

});//END ONLOAD 

http://jsfiddle.net/KLjH3/1/