jQuery는 한 번에 하나씩 요소 토글을 교환합니다.
-
19-09-2019 - |
문제
나는 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()
효과를 얻고 멋지고 매끄럽게 해주세요 ...