单击显示/隐藏页面内容

时间:2013-10-15 22:13:45

标签: jquery web

我花了大部分时间尝试使用多个建议的解决方案解决这个问题,但没有一个能够正常工作或完全正是我所追求的。

我只是简单地使用一种方法来隐藏页面加载时的文本内容,并在用户点击相关链接时使其可见,再次单击相同的链接或单击单独的链接时再次隐藏。

  • “about”链接显示有关项目的内容。
  • “联系”链接显示内容信息。
  • 等等。

内容分为相关的div:

<div class="about">
This project is about X, Y & Z
</div>

<div class="contact">
Please contact me at@at.com
</div>

所有内容都会加载到网站上的单个中央内容容器中。

谢谢。

4 个答案:

答案 0 :(得分:0)

使用jquery很容易实现。添加一个类以显示哪些字段是可扩展/可折叠的:

<div class="about expandable">
This project is about X, Y & Z
</div>

<div class="contact expandable">
Please contact me at@at.com
</div>

在您的javascript文件中:

$('.expandable').click(function(e){
    $(this).toggle();
}

答案 1 :(得分:0)

试试这个:

CSS

.toHide{
   display:none;
}

HTML

<div class="about toHide">
This project is about X, Y & Z
</div>

<div class="contact toHide">
Please contact me at@at.com
</div>

jQuery

$('#about').click(function (e) { //in this case I assume you have a element with ID `about` that will trigger the div with that class to show up
    $('.toHide').hide();
    $('.' + this.id).show();
});

成分:

  • 隐藏所有div的新类
  • jQuery hide()&amp;显示()
  • click()事件处理程序

答案 2 :(得分:0)

我的解决方案:

<强> HTML:

<a href="" data-box="about">About</a>
<a href="" data-box="contact">Contact</a>

<div class="box about">
This project is about X, Y & Z
</div>

<div class="box contact">
Please contact me at@at.com
</div>

<强> jQuery的:

$(function(){
    $('a').click(function(ev){
        ev.preventDefault();

        // hide everything
       $('.box').not(
           // except the corresponding box
           $('.box.'+$(this).data('box')+':hidden').fadeIn()
       ).fadeOut(); 
    });
});

<强>演示:

http://jsfiddle.net/tgeNm/

答案 3 :(得分:-1)

Jquery手风琴可以帮助你http://jqueryui.com/accordion/