【求助】js+CSS+TAB

Question

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

Answer 1

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

Answer 2

JQuery UI里好像有。http://jqueryui.com/demos/tabs/

Answer 3

http://www.stilbuero.de/jquery/tabs_3/

Answer 4

http://www.open-open.com/ajax/Tabs.htm
http://www.scriptlover.com/controls/main.html

Answer 5

可以自己写一个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>这里只是调用而已，呵呵

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

dreamweavercs4 有自带的Tab菜单！