`

jQuery 实现tab切换效果

阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
  <head>
    <title>wid.html</title>
    <link rel="stylesheet"  href="./plugin/Travel_tab/css/webwidget_scroller_tab.css" type="text/css" />
    <script type='text/javascript' src='./js/jquery-1.7.1.js'></script>
<script type='text/javascript' src='./plugin/Travel_tab/js/webwidget_scroller_tab.js'></script>
<script type="text/javascript">
$(function() {
$(".webwidget_scroller_tab").webwidget_scroller_tab({
                scroller_time_interval: '5000',
                scroller_window_padding: '10',
                scroller_window_width: '1280',
                scroller_window_height: '730',
                scroller_head_text_color: '#fff',
                scroller_head_current_text_color: '#000',
                directory: 'images'
                });
$(".webwidget_scroller_tab1").webwidget_scroller_tab({
                scroller_time_interval: '5000',
                scroller_window_padding: '10',
                scroller_window_width: '1280',
                scroller_window_height: '730',
                scroller_head_text_color: '#fff',
                scroller_head_current_text_color: '#000',
                directory: 'images'
                });
});
</script>
  </head>
  <body>
  <div class="webwidget_scroller_tab">
  <div class="tabContainer">
  <ul class="tabHead">
  <li class="currentBtn"><a>NUM1</a></li>
  <li><a>NUM2</a></li>
  <li><a>NUM3</a></li>
  </ul>
  </div>
  <div class="tabBody">
  <ul>
  <li class="tabCot">
  <div class="webwidget_scroller_tab1">
  <div class="tabContainer">
  <ul class="tabHead">
  <li class="currentBtn"><a>NUM11</a></li>
  <li><a>NUM12</a></li>
  <li><a>NUM13</a></li>
  </ul>
  </div>
  <div class="tabBody">
  <ul>
  <li class="tabCot">11</li>
  <li class="tabCot">12</li>
  <li class="tabCot">13</li>
  </ul>
  </div>
  </div>
  </li>
  <li class="tabCot">2</li>
  <li class="tabCot">3</li>
  </ul>
  </div>
  </div>
  </body>
</html>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics