슬라이드 쇼용 이미지에 div href를 만드는 방법

Question

슬라이드 쇼의 텍스트 div를 활성 배경으로 링크로 참조하려고하지만이를 완료 할 수없는 것 같습니다.

내가 얻으려고하는 것은 매번 첫 번째 텍스트 블록을로드 할 때마다 활성화되어있는 배경을 가지고 있어야하고 텍스트 블록에서 텍스트를 클릭하면 활성 상태가되고 내용을 볼 수 있습니다. 표제 (h1s).

귀하의 도움에 감사드립니다.

http://jsfiddle.net/EDc8M/1/

HTML :

<div id="sShow"> 
     <div id="sShowGallery"> 
      <ul> 
       <li id="sld1"><a href="#article1"><img src="resource/images/sShow/img_news1.png" alt="img1" width="510" height="240"></a></li> 
       <li id="sld2"><a href="#article2"><img src="resource/images/sShow/img_news2.jpg" alt="img2" width="510" height="240"></a></li> 
       <li id="sld3"><a href="#article3"><img src="resource/images/sShow/img_news1.png" alt="img3" width="510" height="240"></a></li> 
      </ul> 
     </div> 
     <div id="sShow_nav"> 
      <div class="sShow_bg"> 
       <a href="#article1"><h1>30 Characters max title 1</h1></a> 
       <a href="#sld1"><p>Donec nisi velit, posuere sit amet bibendum at, hendrent rhoncus nunc. Aenean leo purus.</p></a> 
      </div> 
      <div class="sShow_bg"> 
       <a href="#article2"><h1>30 Characters max title 2</h1></a> 
       <a href="#sld2"><p>Donec nisi velit, posuere sit amet bibendum at, hendrent rhoncus nunc. Aenean leo purus.</p></a> 
      </div> 
      <div class="sShow_bg"> 
       <a href="#article3"><h1>30 Characters max title 3</h1></a> 
       <a href="#sld3"><p>Donec nisi velit, posuere sit amet bibendum at, hendrent rhoncus nunc. Aenean leo purus.</p></a> 
      </div> 
     </div> 
    </div> 

스크립트 :

$(document).ready(function(){ 
    $("#sShowGallery").css("overflow", "hidden"); 
    $(".sShow_bg").css("visibility", "visible"); 
    $(".sShow_bg a[href=#sld1]").addClass("ss_active"); 

    $("#sShow_nav").localScroll({ 
     target:'#sShowGallery', axis: 'x' 
    }); 

    $(".sShow_bg a").click(function(){ 
     $(".sShow_bg a").removeClass("ss_active"); 
     $(this).addClass("ss_active"); 
    }); 
}); 

Answer 1

당신의 div 요소에서 두 anchors를 사용할 필요가 없습니다.

HTML

<div class="sShow_bg"> 
    <a href="#sld1"><h1>This is a title</h1> 
    <p>Lorem ipsum dolar sit amet</p></a> 
</div> 

CSS

.sShow_bg a { 
    display: block; 
    /* other code here */ 
} 
.ss_active { 
    background-color: orange; 
    color: #FFFFFF; 
} 

자바 스크립트 이것은 당신의 상자를 만들 것입니다

$(document).ready(function(){ 
    $("#sShowGallery").css("overflow", "hidden"); 
    $(".sShow_bg").css("visibility", "visible"); 
    $(".sShow_bg a[href=#sld1]").addClass("ss_active"); 

    $("#sShow_nav").localScroll({ 
     target:'#sShowGallery', axis: 'x' 
    }); 

    $(".sShow_bg a").click(function(){ 
     $(".sShow_bg a").removeClass("ss_active"); 
     $(this).addClass("ss_active"); 
    }); 
}); 

하나의 큰 사용자 친화적 인 버튼. 위에서 남긴 의견에 회신하지 않으면 이 아니라고 가정합니다.은 기본적으로 단락을 숨기려고합니다. 즉, 사용자를 혼란스럽게하는 두 개의 별도 앵커를 가질 필요가 없습니다. 사용자를 혼란스럽게 만들 수 있습니다.