0

我花了一天的大部分时间尝试使用多种建议的解决方案来解决这个问题，但没有一个有效或完全符合我的要求。

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

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

内容分为相关的div：

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

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

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

谢谢你。

4

4 回答 4

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 隐藏（）和显示（）
  • click() 事件处理程序
于 2013-10-15T22:19:19.373 回答
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/

于 2013-10-15T22:21:35.240 回答
-1

这很容易用 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();
}
于 2013-10-15T22:18:09.670 回答
-1

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

于 2013-10-15T22:20:14.883 回答