div 클릭 가능하게 만드는 방법?

StackOverflow https://stackoverflow.com/questions/1057416

  •  21-08-2019
  •  | 
  •  

문제 

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

위와 같은 Div의 경우 마우스가 켜져있을 때 커서 : 포인터가되고 클릭하면 a를 발사해야합니다.

JavaScript 기능, 그 작업을 수행하는 방법?

편집하다: 마우스가 켜져있을 때 DIV의 배경색을 변경하는 방법은 무엇입니까?

다시 편집하십시오: 첫 번째 스팬의 너비를 만드는 방법 = 120px? Firefox에서 작동하지 않는 것 같습니다.

도움이 되었습니까?

해결책

"무언가"와 같은 신분증을주세요.

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 = '';
};

다른 팁

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

가장 단순한 일입니다.

물론 최종 솔루션에서는 마크 업을 스타일링 (CSS) 및 동작 (JavaScript)과 분리해야합니다. 목록에 이 특정 문제를 해결할뿐만 아니라 일반적으로 마크 업 디자인에 대한 모범 사례.

jQuery를 사용하는 것이 좋습니다.

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

ClickBox라는 CSS 클래스를 사용하여 jQuery로 활성화하는 것이 좋습니다.

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

이제 당신이해야 할 유일한 일은 div를 클릭 가능한 것으로 표시하고 링크를 제공하는 것입니다.

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

마우스 커서를 변경하기위한 CSS 스타일과

.clickbox {
    cursor: pointer;
}

쉽지 않습니까?

추가 onclick 기인하다

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

커서가 사용을 변경하도록합니다 CSS의 커서 규칙.

div[onclick] {
  cursor: pointer;
}

선택기는 일부 버전의 IE에서 작동하지 않는 속성 선택기를 사용합니다. 해당 버전을 지원하려면 DIV에 클래스를 추가하십시오.

질문을 업데이트하면서 다음은 무관심한 예입니다.

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

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

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

이것은 배경색도 변경됩니다

그들 중 가장 단순한 것 :

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

이 div가 함수 인 경우 Style = "Cursor : Pointer"와 같은 스타일의 Cursor : Pointer를 사용하고 Onclick 함수를 사용할 수 있습니다.

이와 같이

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

그러나 나는 당신이 JS 프레임 워크를 사용하는 것이 좋습니다 jQuery 또는 extjs

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top