2012-04-01 3 views
1

자바 스크립트를 제외한 모든 링크를 숨기는 가장 좋은 방법은 무엇입니까? 자바 스크립트에서 하나를 제외한 모든 링크 숨기기?

내가 다음 말해봐 (JQuery와는 괜찮습니다) :

<div id="choices"> 
    <div><a href="#">A<></div> 
    <div><a href="#">B</a></div> 
    <div><a href="#">C</a></div> 
</div> 

나는 사용자가 클릭이 A, B 또는 C의 하나를 포함하지 않는 사업부 년대를 연결하면이 같은 것을 만들고 싶어 그 선택을 취소하고 선택한 선택 항목이 경고 상자에 나타납니다. 재설정 버튼을 클릭하면 모든 div가 정상적으로 다시 나타납니다.

예 : 사용자가 A를 클릭하면 B 및 C div가 숨어집니다. 사용자가 재설정 버튼을 클릭하고 모두 다시 표시됩니다.

어떻게해야합니까?

참고 : ID를 각각 A, B, C div에 각각 할당하고 사용자가 B를 클릭하면 원하는 항목에 대해 $ (divnotclicked) .hide()를 호출하는 기능을 만들었습니다. 숨는 장소. 리셋 버튼의 경우, $ (A) .show(), $ (b) $ .show() (C) .show() .... 각각에 대해 .show 나는 그들 각자에게 ID를 할당하지 않고도 할 수있는 방법. 나는 그것을하는 제일 방법을 찾고있다.

이 작업을 수행하는 가장 좋은 방법은 각각의 기능을 수동으로 호출하거나 "선택 사항"div 내의 각 div에 ID를 할당하지 않는 것이 좋습니다. 또는 리셋 버튼을 클릭하면 각 개별 div에서 ".show"를 호출해야합니다.

+0

나는 각각 A, B, C div에 각각 ID를 할당하고 사용자가 B를 클릭하면 숨길 값에 대해 $ (divnotclicked) .hide()를 호출하는 함수를 만들었습니다. 리셋 버튼의 경우, $ (A) .show(), $ (b) $ .show() (C) .show() .... 각각에 대해 .show 나는 그들 각자에게 ID를 할당하지 않고도 할 수있는 방법. 나는 그것을하는 제일 방법을 찾고있다. – Rolando

+0

당신은 순수한 자바 스크립트에 관심이 있습니까, 아니면 jquery도 도움이 될까요? –

+0

JQuery가 좋습니다. – Rolando

답변

2

를, 그것은 아주 간단합니다 행동. 일반적으로 jsFiddle은 jQuery (또는 다른 프레임 워크)와 함께 플레이해야 할 때 훌륭한 도구입니다.여기

0

각 링크에 개별 ID를 지정하십시오. 예를 들어 그들 모두에 동일한 클래스를 추가 : 누군가가 당신의 버튼 중 하나를 클릭 할 때

<a class="mylinks" id="link01" href="someURL">friendly text</a> 

후, 숨겨진에 클래스의 CSS-가시성을 설정 한 다음 ID의 가시성을 설정하는 것이 다시 볼 수있는 버튼에 속합니다.

1

그냥 모든 링크를 얻고 not 방법을 사용하여 클릭 된 하나 제거 : 여기에, 또한

$('#choices div').click(function() { $(this).siblings().hide(); }); 
$('#resetButton').click(function() { $('#choices div').show(); }); 

이 코드와 jsFiddle입니다 : jQuery로

$('#choices a').click(function(e){ 
    e.preventDefault(); // stop the click from activating the link 
    $('#choises a').not(this).parents().hide(); 
    // do something with the chosen link 
}); 

$('#reset').click(function(){ 
    $('#choices a').parents().show(); 
}); 
0

내가 그것을 할 것입니다 방법은 다음과 같습니다

$('#choices a').click(function() { 
    $(this).parent().siblings().hide(); 
}); 

을 그리고 리셋을 위해 : http://jsfiddle.net/W9Sym/

0

과 :

<div id="choices"> 
    <div><a href="#">A</a></div> 
    <div><a href="#">B</a></div> 
    <div><a href="#">C</a></div> 
</div> 
<button>Reset</button> 

다음
$('#resetButton').click(function() { 
    $('#choices div').show(); 
}); 

는 작업 예제 사기를 숨기다 선택하지 않은 사람들의 된 div 이닝과 리셋을 보여 가지고 here's a demo

$(function() { 

    $('#choices').on('click', 'a', function() { //bind click handler to choices, for links 
     $(this).parent().siblings().hide();  //find the others and hide them 
    }); 

    $('button').on('click', function() {  //bind click to button 
     $('#choices > *').show();    //show all children of choices   
    }); 

});​ 
0

당신은이 일을 시도 할 수 있습니다 : 자세한의

<div id='A'>Hi, I'm A</div> 
<div id='B'>Hello</div> 
<div id='C'>Aaargh!</div> 

<a href='#A'>A</a> 
<a href='#B'>B</a> 
<a href='#C'>C</a> 

<button type='reset'>Reset</button> 

jQuery를

$('a').click(function() { 
    var show = $(this).attr('href'); 
    $('div').each(function(e) { 
     $(this).not(show).hide(); 
    }); 
    e.preventDefault(); 
}); 

$('button').click(function() { 
    $('div').show(); 
}); 

종류 HTML을하지만, 그 일을 끝내야 해.

+0

이 주제에 대한 간단한 솔루션이 있습니다. –

+0

완전히 있습니다. 내가 게시했을 때 그들은 거기에 없었다. :) 또한, 나는 질문조차 제대로하지 못했습니다. LOL. – rgin

관련 문제