【求助】js+CSS+TAB

xupeihuagudulei9 2010-07-09 04:06:08
谁共享一款tab.
要求：JS写的。
通用性强（可以运用于所有界面而不用在每个页面写CSS和JS）

大家共享出来吧
...全文
194 19 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
19 条回复
切换为时间正序
请发表友善的回复…
发表回复
fengqipiaobo 2010-07-09
  • 打赏
  • 举报
 回复
dreamweavercs4 有自带的Tab菜单！
wangjinchang 2010-07-09
  • 打赏
  • 举报
 回复 


<div class="left in_l">

  <div class="T_Menu_01" id="SubShow_01">

  <label class="selected" id="SSLabel_01_01">

  <a href="/news/news_more_1.html">公告</a></label>

  <label id="SSLabel_01_02">

  <a href="/news/news_more_2.html">活动</a></label>

  <label id="SSLabel_01_03">

  <a href="/news/news_more_3.html">特价</a></label>

  <label id="SSLabel_01_04">

  <a href="/service/service.html">帮助</a></label>

  </div>

  </div>

  <div class="left in_l_r">

  <div id="SSCont_01_01" class="b_cont_01">

  test </div>

  <div id="SSCont_01_02" style="display: none;" class="b_cont_01">

  test

  </div>

  <div id="SSCont_01_03" style="display: none;" class="b_cont_01">

  test

  </div>

  <div id="SSCont_01_04" style="display: none;" class="b_cont_01">

  test

  </div>



  <script language="JavaScript" type="text/javascript">

  var SubShow_01 = new SubShowClass("SubShow_01", "onmouseover", 0);

  SubShow_01.addLabel("SSLabel_01_01", "SSCont_01_01");

  SubShow_01.addLabel("SSLabel_01_02", "SSCont_01_02");

  SubShow_01.addLabel("SSLabel_01_03", "SSCont_01_03");

  SubShow_01.addLabel("SSLabel_01_04", "SSCont_01_04");

  </script>



  </div>
wangjinchang 2010-07-09
  • 打赏
  • 举报
 回复
<div class="left in_l">
<div class="T_Menu_01" id="SubShow_01">
<label class="selected" id="SSLabel_01_01">
<a href="/news/news_more_1.html">公告</a></label>
<label id="SSLabel_01_02">
<a href="/news/news_more_2.html">活动</a></label>
<label id="SSLabel_01_03">
<a href="/news/news_more_3.html">特价</a></label>
<label id="SSLabel_01_04">
<a href="/service/service.html">帮助</a></label>
</div>
</div>
<div class="left in_l_r">
<div id="SSCont_01_01" class="b_cont_01">
test </div>
<div id="SSCont_01_02" style="display: none;" class="b_cont_01">
test
</div>
<div id="SSCont_01_03" style="display: none;" class="b_cont_01">
test
</div>
<div id="SSCont_01_04" style="display: none;" class="b_cont_01">
test
</div>

<script language="JavaScript" type="text/javascript">
var SubShow_01 = new SubShowClass("SubShow_01", "onmouseover", 0);
SubShow_01.addLabel("SSLabel_01_01", "SSCont_01_01");
SubShow_01.addLabel("SSLabel_01_02", "SSCont_01_02");
SubShow_01.addLabel("SSLabel_01_03", "SSCont_01_03");
SubShow_01.addLabel("SSLabel_01_04", "SSCont_01_04");
</script>

</div>
zlchina1989 2010-07-09
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 xupeihuagudulei 的回复:]

最主要的是网上都是先把tab里的内容都全定义在html里的
通过点击每一个tab设置display属性。
而我想要的是点击 tab的时候再生成当前tab中的内容
再加上这几个功能。
JS写的。
通用性强（可以运用于所有界面而不用在每个页面写CSS和JS）
[/Quote]
根据楼主的叙述，我认为只能是去找找看ajax局部刷新的代码，毕竟要点击之后再tab中的内容，还是真的得要动态去数据（不论是取数据库数据，还是xml等），所以，楼主看看是否你的要求合理。
xyytuo 2010-07-09
  • 打赏
  • 举报
 回复
nextuntil 2010-07-09
  • 打赏
  • 举报
 回复
类似的这种，自己花个时间写个库。

以后用起来也方便勒。、

呵呵、
nextuntil 2010-07-09
  • 打赏
  • 举报
 回复
<div class="left in_l">
<div class="T_Menu_01" id="SubShow_01">
<label class="selected" id="SSLabel_01_01">
<a href="/news/news_more_1.html">公告</a></label>
<label id="SSLabel_01_02">
<a href="/news/news_more_2.html">活动</a></label>
<label id="SSLabel_01_03">
<a href="/news/news_more_3.html">特价</a></label>
<label id="SSLabel_01_04">
<a href="/service/service.html">帮助</a></label>
</div>
</div>
<div class="left in_l_r">
<div id="SSCont_01_01" class="b_cont_01">
test </div>
<div id="SSCont_01_02" style="display: none;" class="b_cont_01">
test
</div>
<div id="SSCont_01_03" style="display: none;" class="b_cont_01">
test
</div>
<div id="SSCont_01_04" style="display: none;" class="b_cont_01">
test
</div>

<script language="JavaScript" type="text/javascript">
var SubShow_01 = new SubShowClass("SubShow_01", "onmouseover", 0);
SubShow_01.addLabel("SSLabel_01_01", "SSCont_01_01");
SubShow_01.addLabel("SSLabel_01_02", "SSCont_01_02");
SubShow_01.addLabel("SSLabel_01_03", "SSCont_01_03");
SubShow_01.addLabel("SSLabel_01_04", "SSCont_01_04");
</script>

</div>
nextuntil 2010-07-09
  • 打赏
  • 举报
 回复
可以自己写一个tab的js库勒

每个页面要调用的时候，传入切换选项卡，和对应的项，以及切换方式。

比如：

<script language="JavaScript" type="text/javascript">
var SubShow_01 = new SubShowClass("SubShow_01", "onmouseover", 0);
SubShow_01.addLabel("SSLabel_01_01", "SSCont_01_01");
SubShow_01.addLabel("SSLabel_01_02", "SSCont_01_02");
SubShow_01.addLabel("SSLabel_01_03", "SSCont_01_03");
SubShow_01.addLabel("SSLabel_01_04", "SSCont_01_04");
</script>

这里只是调用而已，呵呵
huiyuan659 2010-07-09
  • 打赏
  • 举报
 回复
ajax控件:TabContainer
xupeihuagudulei 2010-07-09
  • 打赏
  • 举报
 回复
moudy 2010-07-09
  • 打赏
  • 举报
 回复
踩一个，等好人。。。
xupeihuagudulei 2010-07-09
  • 打赏
  • 举报
 回复
不要 jquery..
wjn161 2010-07-09
  • 打赏
  • 举报
 回复
http://www.stilbuero.de/jquery/tabs_3/
wjn161 2010-07-09
  • 打赏
  • 举报
 回复
JQuery UI里好像有。http://jqueryui.com/demos/tabs/
xupeihuagudulei 2010-07-09
  • 打赏
  • 举报
 回复
最主要的是网上都是先把tab里的内容都全定义在html里的
通过点击每一个tab设置display属性。
而我想要的是点击 tab的时候再生成当前tab中的内容
再加上这几个功能。
JS写的。
通用性强（可以运用于所有界面而不用在每个页面写CSS和JS）
xupeihuagudulei 2010-07-09
  • 打赏
  • 举报
 回复
网上的都不怎么好。
想问下大家用得比较爽滴
嘿嘿
lsq667 2010-07-09
  • 打赏
  • 举报
 回复
沙发，楼主到网上找吧，应该有不少的
谷歌浏览器扩展程序 -
这些扩展程序是由JavaScript、HTML和CSS等Web技术编写，通过Chrome的API接口与浏览器进行交互，提供诸如广告拦截、网页翻译、效率工具等各种实用功能。 开源项目是指源代码对公众开放的软件项目，鼓励社区成员参与...
ionic初学者填坑.docx
- **Node.js**: 是一个基于Chrome V8引擎的JavaScript运行环境，允许开发者使用JavaScript编写服务端程序。 - **npm (Node Package Manager)**: 是随同Node.js一起安装的一个包管理工具，用于安装和管理Node.js...
mysql+HTML+css01
(例如：tab_name，而不是 tabName ) – 01.查看mysql服务器中所有数据库 – 02.进入某一数据库（进入数据库后，才能操作库中的表和表记录） – 语法：USE 库名; – 查看已进入的库 – 03.查看当前数据库中的所有表 -...
个人论坛系统 - HTML5 + CSS + JavaScript 实现
下面是一个简单的个人论坛系统的完整源码，包含HTML结构、CSS样式和JavaScript功能。这个实现是原创的，包含了基本的论坛功能：帖子列表、发帖、回复等。
为什么我html 5加TAB没有用,css,_css3实现的tab切换，里面这段css选择器是什么意思？我没看明白，还有input为什么必须加name属性，不加就实现不了效果，css - phpStu...
css3实现的tab切换，里面这段css选择器是什么意思？我没看明白，还有input为什么必须加name属性，不加就实现不了效果CSS3实现Tab切换* { margin: 0;padding: 0;}.main {width: 300px;height: 150px;margin: 50px ...
.NET社区

62,243

社区成员

668,998

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章