절대 위치에 나란히 배치 된 여러 개의 슬라이딩 패널 탭을 클릭 할 수있게하려면 어떻게해야합니까?

Question

다음은 내 코드의 예입니다.

<div id="wrapper1" style="width:300px"> 
    <div id="panel1"> 
     content 
    </div> 
    <div id="tab1"> 
     <a>Tab 1</a> 
    </div> 
    </div> 

    <div id="wrapper2" style="width:200px"> 
    <div id="panel2"> 
     content 
    </div> 
    <div id="tab2"> 
     <a>Tab 2</a> 
    </div> 
    </div> 

패널은 페이지로드시 display:none;이지만 탭이 표시됩니다. 패널을 열거 나 닫을 때 탭에서 slideToggle()을 사용하고 있습니다.

문제는 각 래퍼의 가운데에 탭을 배치하고 패널을 접을 때 간격을 약 10px로 떨어 뜨리는 것입니다. 그러나 두 래퍼 모두 position:absolute;이므로 첫 번째 래퍼의 너비가 두 번째 래퍼로 넘어 가기 때문에 두 번째 탭은 첫 번째 래퍼의 "아래"에 있습니다. 이것은 명확하게 두 번째 탭을 unclickable 날 나뭇잎. 아무도 절대적으로 위치 div의 투명한 부분을 통해 클릭하는 방법을 알고 있습니까? 첫 번째 래퍼에서 해당 탭을 클릭 할 수 있어야하므로 pointer-events:none;을 사용할 수 없습니다.

Answer 1

div의 투명한 부분을 클릭 할 수 없습니다. 투명 여부에 상관없이 상단의 div가 클릭을 받게됩니다.