【求助】js+CSS+TAB

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

大家共享出来吧 --------------------编程问答-------------------- 沙发，楼主到网上找吧，应该有不少的 --------------------编程问答-------------------- 网上的都不怎么好。
想问下大家用得比较爽滴
嘿嘿 --------------------编程问答-------------------- 最主要的是网上都是先把tab里的内容都全定义在html里的
通过点击每一个tab设置display属性。
而我想要的是点击 tab的时候再生成当前tab中的内容
再加上这几个功能。
JS写的。
  通用性强（可以运用于所有界面而不用在每个页面写CSS和JS） --------------------编程问答-------------------- JQuery UI里好像有。http://jqueryui.com/demos/tabs/ --------------------编程问答-------------------- http://www.stilbuero.de/jquery/tabs_3/ --------------------编程问答-------------------- 不要 jquery.. --------------------编程问答-------------------- 踩一个，等好人。。。 --------------------编程问答-------------------- --------------------编程问答-------------------- ajax控件:TabContainer --------------------编程问答-------------------- http://www.open-open.com/ajax/Tabs.htm
http://www.scriptlover.com/controls/main.html --------------------编程问答-------------------- 可以自己写一个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>

这里只是调用而已，呵呵 --------------------编程问答-------------------- <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> --------------------编程问答-------------------- 类似的这种，自己花个时间写个库。

以后用起来也方便勒。、

呵呵、 --------------------编程问答-------------------- --------------------编程问答-------------------- --------------------编程问答--------------------

引用 3 楼 xupeihuagudulei 的回复:

最主要的是网上都是先把tab里的内容都全定义在html里的
通过点击每一个tab设置display属性。
而我想要的是点击 tab的时候再生成当前tab中的内容
再加上这几个功能。
JS写的。
通用性强（可以运用于所有界面而不用在每个页面写CSS和JS）

根据楼主的叙述，我认为只能是去找找看ajax局部刷新的代码，毕竟要点击之后再tab中的内容，还是真的得要动态去数据（不论是取数据库数据，还是xml等），所以，楼主看看是否你的要求合理。 --------------------编程问答-------------------- <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> --------------------编程问答--------------------

<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>

--------------------编程问答-------------------- dreamweavercs4 有自带的Tab菜单！

补充：.NET技术 ,  ASP.NET