个人中心
gpt4 book ai didi

javascript - 我如何使用 jQuery 实现类似 GMail 的选项卡式/面板式界面？

转载 作者：太空宇宙 更新时间：2023-11-04 05:18:24 27 4
gpt4 key购买 nike

我正在尝试创建一个界面，就像下面使用 jQuery 显示的界面的右侧一样——带页眉(主题)和页脚的选项卡式/装饰式消息。 enter image description here

有没有人用 jQuery 做过类似的事情或者可以建议解决问题的方向？我在网上搜索了一段时间，但没有找到足够接近的解决方案。我遇到了“30 jQuery tabs tutorial”，但也没有找到我要找的东西。

在此先感谢您的帮助。让我知道是否可以提供有关我正在寻找的内容的更多详细信息。

最佳答案

基本丑陋的想法:

<!DOCTYPE html>
<html>
<head>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    jQuery(document).ready(function(){
    $('.thread .head').click(function() {
    $(this).next().slideToggle("fast");
    return false;
    }).next().hide();
    }); 
</script
<meta charset=utf-8 />
<title>basic Idea</title>

<style>
  .thread { width: 300px; border: 1px soildl; }
  .thread h2{ background-color: #CCC; margin: 0; border: 1px solid #FFC;}
  .thread div{ background-color:#FDF; border: 1px solid #000;}
</style>
</head>
<body>
  <div class="thread">
    <h2 class="head">The information here</h2>
    <div>
       blah blah blah blah
    </div>
    <h2 class="head">come other information here</h2>
    <div>
       blah blah blah blah Goo Goo Goo
    </div>
    <h2 class="head">hee hee hee</h2>
    <div>
       ho ho ho ho ho
    </div>    
  </div>
</body>
</html>

JSBIN

关于javascript - 我如何使用 jQuery 实现类似 GMail 的选项卡式/面板式界面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7275315/

27 4 0
文章推荐： linux - *** 检测到缓冲区溢出 *** : php terminated
文章推荐： python - Elasticsearch计算后将两个字段回填到一个新字段中
文章推荐： java - 如何使用top linux计算java的实际内存使用情况？
文章推荐： linux - Bash 脚本从文本文件复制单词并在终端上运行
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com