jQuery는 한 번에 하나씩 요소 토글을 교환합니다.

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

문제

나는 jQuery를 처음 접했고 JScript 대신 jQuery로 다음을 달성하는 방법에 대해 아이디어가 있는지 알고 싶습니다.

당신은 상단 div 안에있는 A 그룹이 있습니다.

<h3>
<a id="acer" href="#acerca">acerca</a> |
<a id="cur" href="#cursos">cursos y clases</a> |
<a id="cal" href="#calendario">calendario</a> |
<a id="con" href="#contacto">contacto</a>
</h3>

그리고 그 아래에는 동일한 컨테이너 div 안에 4 개의 컨텐츠 div가 있으며, 다른 하나는 위의 각 A에 속합니다.

<div id="acerca"></div>
<div id="cursos"></div>
<div id="calendario"></div>
<div id="contacto"></div>

이제 여기서 아이디어는 이러한 컨텐츠 DIV를 모두 닫아서 시작한다는 것입니다. 첫 번째 : Acerca는 사용자에게 보입니다.

$(document).ready(function(){

    $("#cursos,#calendario,#contacto").hide();

});

이제 H3 A를 맨 위에 사용하면 다음 동작이 이루어지기를 원합니다.

1.- 기본적으로 열린 항목과 다른 항목을 클릭하면 (ACERCA), 현재 열린 항목을 닫고 새 항목을 보여주십시오. 2.- 이미 열린 동일한 항목을 클릭하면 (ACERCA) 아무 일도 일어나지 않습니다. 항상 하나의 콘텐츠가 열려 있어야합니다. 3.- 가능하면 #anchors를 사용하여 못생긴 "JavaScript :;" 옛날의.

이것은 JavaScript의 OnClick 함수를 사용하는 경우 매우 간단하지만 ( #3 용 저장), jQuery에 갇혀 있습니다.

도움은 Sotkra에게 큰 감사를 표합니다

도움이 되었습니까?

해결책

나는 모든 div에 공통 클래스를 할당하여 그것들을 총체적으로 참조 할 수 있었다. 앵커 중 하나가 선택되면 모든 DIV에서 "선택된"클래스를 제거한 다음 표시되어야 할 "선택된"클래스를 DIV에 적용합니다. 그런 다음 선택된 클래스가없는 모든 DIV를 숨기고 선택한 클래스가있는 DIV를 표시합니다. 이런 식으로 동일한 링크를 다시 찍으면 모든 DIV를 숨기고 선택한 링크를 표시 한 다음 선택한 링크가 표시되지 않습니다.

  $('a').click( function() {
      var all = $('div.interface');
      var selected = $(this).attr('href');
      all.removeClass('selected');
      $(selected).addClass('selected');
      div.filter(':not(.selected)').hide();
      div.filter('.selected').show();
      return false;  // stop the link from being taken
 });

다른 팁

가장 쉬운 솔루션은 메뉴의 모든 요소에 대한 이벤트를 수동으로 추가 한 다음 Show Hidde와 동일한 효과를 추가 할 수 있습니다.

$("#acer").click(function() { $("#acerca").toggle();} );
$("#cur").click(function() { $("#cursos").toggle();} );
...

또 다른 솔루션,이 경우 앵커 텍스트가 DIV ID 여야하는 필수 조건으로 jQuery 코드를 변경하지 않고 메뉴 항목을 추가 할 수 있습니다.

<a href="#acerca" class="anchorClass">acercade</a>
<div id="acercade"></div>

    $(".anchorClass").click(function(){ 
            $("#"+$(this).text()).toggle(); 
    });

약간 다른 변형 Tvanfosson의 아이디어.

$('a').click(
    function()
    {
        var selected = $(this).attr('href');
        //If user clicked on a link which is already displayed, do nothing.
        if($(selected).hasClass('selected'))
            return;

        //hide all the divs.
        $('div.interface')
            .hide()
            .removeClass('selected');

        //show the selected div.
        $(selected)
            .show()
            .addClass('selected');
   }
}

당신의 제안에서 영감을 얻은 후, 나는 이것을 생각해 냈습니다.

$('h3 a').click(
    function()
    {

        var checker = $(this).attr('href');

        if ($(checker).is(":visible"))

        {
        return false;
        }

        else {      

        $("#acerca").hide();
        $("#cursos").hide();
        $("#calendario").hide();
        $("#contacto").hide();
        $(checker).show();

        return false;


            }
   });

이 경우 :

1.-다른 div의 '타겟팅'을 자동으로 자동화하여 개별적으로 이름을 지정하지 않습니까? 배열?

어쨌든 감사합니다, 나는 계속 일할 것입니다.

나는 이제 '앵커 메뉴'자체에 추가 기능/터치를 추가하는 한 멀리 갔다. jQuery 현명한 모든 것이 이렇게 보입니다. 예시에 사용 된 바보 같은 변수 이름을 정지하지 마십시오 =) :

$(document).ready(function(){

$("#cursos,#calendario,#contacto").hide();
$("#ace").addClass('check');


$('h3 a').click(
    function()
    {

        var checker = $(this).attr('href');
        var anchorer = $(this);

        if ($(checker).is(":visible"))

        {
        return false;
        }

        else {      

        $("#acerca,#cursos,#calendario,#contacto").hide();
        $(checker).show();
        $("#ace,#cur,#cal,#con").removeClass('check');
        $(anchorer).addClass('check');

        return false;  // 


            }
   });


});

훌륭한 답변들!

나는 약간의 조정을했다 토글링하는 동안 애니메이션 Divs ... 나는 슬라이드 효과를 사용했지만 모든 종류의 애니메이션과 함께 작동해야합니다.

$('a').click( function() {
    var all = $('div.interfase');
    var selected = $(this).attr('href');
    if($(selected).hasClass('selected') || $(selected).is(":visible"))
        return false;
    else
    {
        all.removeClass('selected');
        $(selected).addClass('selected');
        $('div.interfase:visible').filter(':not(.selected)').hide('slide',
        function() {
        all.filter('.selected').show('slide');
        });
        return false;
    }
});

메모: 이 코드는 내가 사용하고 있기 때문에 이전에 선택되고 보이는 div가있는 경우에만 작동합니다. 콜백 함수 내부에 hide() 활성화하려면 show() 효과를 얻고 멋지고 매끄럽게 해주세요 ...

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