隐藏所有的div和用jquery显示一个

我在堆栈上浏览了一个可以应用的答案，但是我对javascript并不满意。隐藏所有的div和用jquery显示一个

我有一个需要显示隐藏div的链接列表。很简单。但是，这些链接中有大约8个必须占据相同的空间。因此，当你点击链接1（链接1的div出现），然后你点击链接2，我需要链接1的div消失并且链接2的div出现。

目前，我正在使用jQuery的切换功能来获得我正在寻找的效果，但是您必须单击该链接两次以再次隐藏信息。

任何想法将不胜感激！

来源

2011-08-30 Critologist

如果您想要最佳/最快/最相关的帮助，请显示您的html和您的代码。 – jfriend00

没有有任何语法一起工作，你应该能够使用类似以下内容：

要隐藏链接本身：

//When a link is clicked... 
$(".yourlink").click(function(){ 
    //Hide all of the links 
    $(".yourlink").hide(); 
    //Show the selected link 
    $(this).show(); 
});

同样的，如果你想使用的div：（使用下面所包括的HTML）

//Javascript 
$(".link").click(function() 
{ 
    $('div').hide(); 
    $('#'+$(this).attr('name')).show(); 
}); 

//HTML 
<a class='link' name='1'>Link 1</a> 
<a class='link' name='2'>Link 2</a> 
<a class='link' name='3'>Link 3</a> 
<a class='link' name='4'>Link 4</a> 
<a class='link' name='5'>Link 5</a> 
<a class='link' name='6'>Link 6</a> 
<a class='link' name='7'>Link 7</a> 
<a class='link' name='8'>Link 8</a> 

<div id='1'>1</div> 
<div id='2'>2</div> 
<div id='3'>3</div> 
<div id='4'>4</div> 
<div id='5'>5</div> 
<div id='6'>6</div> 
<div id='7'>7</div> 
<div id='8'>8</div>

Working Demo

来源

2011-08-30 15:31:13

+1不错，简单... – Jakub

你隐藏并显示链接（一）不是div。 – BZink

@BZink - 我不确定他最初在找什么。该演示在其实现中使用div。 –

相反肘节的，使用.show（）来显示和.hide（）隐藏。

来源

2011-08-30 15:31:55

在这种情况下，您可以采取两种简单的方法。

利用CSS来帮助切换可见性。
在jQuery中利用show()/hide()。

我会建议的是利用CSS类来帮助您完成您的请求。创建一个类.showObject { display: block; }和另一个.hideObject { display: none; }。一旦你有了类，你可以利用jQuery的功能addClass()和removeClass()来修改显示属性。

来源

2011-08-30 15:33:51 RobB

<a href="#" class="hider">link 1</a> 
    <div id="div1" class="content" style="display:none;"> 
    </div> 

    <a href="#" class="hider">link 2</a> 
    <div id="div2" class="content" style="display:none;"> 
    </div> 

    <a href="#" class="hider">link 3</a> 
    <div id="div3" class="content" style="display:none;"> 
    </div> 

    <a href="#" class="hider">link 4</a> 
    <div id="div4" class="content" style="display:none;"> 
    </div> 

    $(".hider").click(function(event){ 
     $(".content").hide(); 
     $(this).next().show(); 


    });

来源

2011-08-30 15:36:00 BZink

隐藏所有的div和用jquery显示一个

回答

相关问题