كيفية جعل شعبة النقر قادرة؟

Question

<div><span>shanghai</span><span>male</span></div>

لشعبة مثل أعلاه، عندما الماوس على، ينبغي أن يصبح المؤشر: المؤشر، وعند النقر عليها، اطلاق

وظيفة جافا سكريبت، وكيفية القيام بهذه المهمة؟

تعديل : ل؟ وكيفية تغيير لون الخلفية من شعبة عندما الماوس على

تعديل AGAIN : ل؟ كيفية جعل العرض العمر الأول = 120px ويبدو لا تعمل في فايرفوكس

Answer 1

وإعطائها هوية مثل "شيء ما"، ثم:

var something = document.getElementById('something');

something.style.cursor = 'pointer';
something.onclick = function() {
    // do something...
};

وتغيير لون الخلفية (كما في سؤالك تحديث):

something.onmouseover = function() {
    this.style.backgroundColor = 'red';
};
something.onmouseout = function() {
    this.style.backgroundColor = '';
};

Answer 2

و<div style="cursor: pointer;" onclick="theFunction()">

وهو أبسط شيء يعمل.

وبطبيعة الحال في الحل النهائي يجب أن تفصل بين العلامات من التصميم (المغلق) والسلوك (جافا سكريبت) - قراءة عليه <لأ href = "http://www.alistapart.com/articles/behavioralseparation" يختلط = " noreferrer "> على قائمة بصرف النظر للحصول على الممارسات الجيدة على ليس فقط حل هذه المشكلة بالذات ولكن في تصميم العلامات بشكل عام.

Answer 3

وأقترح استخدام مسج:

$('#mydiv')
  .css('cursor', 'pointer')
  .click(
    function(){
     alert('Click event is fired');
    }
  )
  .hover(
    function(){
      $(this).css('background', '#ff00ff');
    },
    function(){
      $(this).css('background', '');
    }
  );

Answer 4

وأقترح استخدام فئة CSS دعا clickbox وتفعيلها مع مسج:

$(".clickbox").click(function(){
     window.location=$(this).find("a").attr("href"); 
     return false;
 });

والآن الشيء الوحيد الذي عليك القيام به هو احتفال شعبة الخاص بك كما نقر وتقديم وصلة:

<div id="logo" class="clickbox"><a href="index.php"></a></div>

وبالإضافة إلى أسلوب CSS لتغيير مؤشر الماوس:

.clickbox {
    cursor: pointer;
}

وسهلة، أليس كذلك؟

Answer 5

عند _ النقر السمة

<div onclick="myFunction( event );"><span>shanghai</span><span>male</span></div>

لتحصل على المؤشر لتغيير استخدام المغلق في حكم المؤشر .

div[onclick] {
  cursor: pointer;
}

وومحدد يستخدم محدد السمة التي لا تعمل في بعض إصدارات IE. إذا كنت ترغب في دعم هذه الإصدارات، إضافة فئة إلى شعبة بك.

Answer 6

وكما لكم تحديث سؤالك، وهنا مثال obtrustive:

window.onload = function()
{
    var div = document.getElementById("mydiv");

    div.style.cursor = 'pointer';
    div.onmouseover = function()
    {
        div.style.background = "#ff00ff";
    };
}

Answer 7

<div style="cursor: pointer;" onclick="theFunction()" onmouseover="this.style.background='red'" onmouseout="this.style.background=''" ><span>shanghai</span><span>male</span></div>

وهذا من شأنه تغيير لون الخلفية وكذلك

Answer 8

وأبسط من كل منهم:

<div onclick="location.href='where.you.want.to.go'" style="cursor:pointer"></div>

Answer 9

وإذا كانت هذه هي وظيفة شعبة أقترح استخدام المؤشر: المؤشر في نمط حياتك مثل نمط = "المؤشر: المؤشر"، ويمكن استخدام وظيفة عند_النقر

ومثل هذا

<div onclick="myfunction()" style="cursor:pointer"></div>

ولكن أقترح عليك استخدام إطار JS مثل مسج أو <وأ href = "HTTP: // شبكة الاتصالات العالمية .extjs.com "يختلط =" نوفولو noreferrer "> extjs