클릭시 표시/숨기기

Question

표시 할 공간의 한 영역과 본문의 두 본문이 있습니다. 이 영역 위에 두 개의 "하이퍼 링크"가 있으며 아래 텍스트를 표시하거나 숨기려면이 영역을 사용하고 싶습니다. 페이지를 처음로드하면 두 링크를 제외하고 아무것도 표시되지 않습니다. 하나의 링크를 클릭하면 텍스트 본문이 표시됩니다. 다른 링크를 클릭하면 이전 본문을 숨기고 새 텍스트를 표시합니다. 단 두 개의 하이퍼 링크가 있지만 사용자가 편리하게 앞뒤로 전환 할 수 있기를 바랍니다. 이것이 가능한가? 이전에는 두 가지 영역에 있기 때문에 자바 스크립트를 사용하여 텍스트를 숨김 해제했습니다. 나는 도 아니고 코드 작성 경험이있다. 이 주제에 대한 다른 답변이 유용하지만 대부분은 버튼과 클릭 리스너를 사용합니다. 하이퍼 링크를 사용하여이 작업을 수행 할 수 있습니까? 코드 예제는 대단히 감사합니다! 이 라인을 따라 뭔가를 수행하는 좋은 jQuery를 스크립트가있다

는

Answer 1

"여기에 텍스트를 표시하지 마십시오"라는 CSS 클래스를 정의한 다음 하이퍼 링크 클릭에서 JS를 사용하여 요소 클래스를 전환 할 수 있습니까?

은 그래서 당신의 HTML이 포함됩니다

div.hide { display:none; [your properties]; } 
div.show { [your properties]; } 

을하고 당신의 JS 이런 식으로 뭔가 보일 것 :

이

<a onclick="showText('text1','text2')" href="javascript:void(0);">Show Text 1</a> 
<div id="text1" class="hide"> text1 </div> 
<a onclick="showText('text2','text1')" href="javascript:void(0);">Show Text 2</a> 
<div id="text2" class="hide"> text2 </div> 

귀하의 CSS가 포함됩니다

function showText(show,hide) 
{ 
    document.getElementById(show).className = "show"; 
    document.getElementById(hide).className = "hide"; 
} 

가에서이 도움말을 하는가를 모든?

Answer 2

, 당신을 위해 어떤 좋은 있는지 살펴 있습니다

http://api.jquery.com/slideToggle/

Answer 3

이 가능하지만,이 일을 더 사용자 친화적 인 방법 jquery tabs와 같은 것이 될 것입니다. jquery UI의 탭 기능을 사용하면 매우 쉽습니다. HTML 태그는 .tabs(); 탭 요소의 ID에 대한 함수로 당신이 jQuery를 사용하는 경우이 작업을 수행 할 수 Jquery Tabs

Answer 4

<a id="myLink" href="javascript:void(0)" onclick="javascript:myLinkButtonClick();"> </a> 

자바 스크립트 : 여기

는 링크입니다

function myLinkButtonClick() 
{ 
    $("#myDiv").hide(); 
} 

또는

또는

function myLinkButtonClick() 
{ 
    $("#myDiv").show(); 
} 

은 당신이 할 수있는 .toggle

function myLinkButtonClick() 
{ 
    $("#myDiv").toggle(); 
} 

Answer 5

많은 사람들은 Javascript를 실행하기 위해 앵커 태그를 사용하는 것이 다소 혼란 스럽다는 점에 동의합니다. 다른 것들 중에서도 사용자를 혼란스럽게 할 수있는 주소 표시 줄에 해시 태그를 생성하기 때문입니다. JS 실행에서 자신의 위치가 없다는 것은 아닙니다.

그러나 이것은 매우 가능합니다. currentDiv는 현재 현재 표시된 DIV 숨어 새를 나타내는 사용 DIV 소자와 show 함수를 표시 참조 :

<a href="#" onclick="show('div1')">Link1</a> 
<a href="#" onclick="show('div2')">Link2</a> 

<div id="div1">Text1</div> 
<div id="div2" style="display:none;">Text2</div> 

<script> 

    var currentDiv = document.getElementById("div1"); 
    function show(divID) { 

     var div = document.getElementById(divID); 

     currentDiv.style.display = "none"; 
     div.style.display = "block"; 

     currentDiv = div; 
    } 

</script> 

가 script 태그는 변수 및 함수를 정의 여기서 하나의 가능한 해결책 하나.

맨 위에있는 앵커 태그를 클릭하면 show 함수를 호출하여 현재 표시된 요소를 앵커 태그에서 지정한 요소로 바꿉니다.

요소를 표시/숨기기 위해 코드는 요소의 CSS display 특성을 변경합니다. block 값은 div 요소를 표시하고 none 값은이 요소를 숨 깁니다. 페이지가로드 될 때 두 번째 div의 display 속성은 none으로 설정됩니다. Javascript는 링크를 클릭 할 때이 속성을 변경합니다.

아니요,이 작업을 수행하는 데 JQuery가 필요하지 않지만 도움이 될 수 있습니다.

Answer 6

탭이 최선의 방법입니다. jQuery 탭에 대한 튜토리얼은 많이 있습니다. 여기에는 개념을 잘 설명하는 fairly basic one과 CSS에서 둥근 모서리를 탭으로 생성하는 here's a more advanced one이 있습니다.