JavaScript 无限TAB的简单示例

这篇文章主要为大家详细介绍了JavaScript 无限TAB的简单示例，具有一定的参考价值，可以用来参考一下。

同一个页面里面存在很多个TAB效果，如果每个TAB区域都要添加JS来控制效果真是太麻烦了，所以我今天写了一个无限TAB的代码。
css:

/**
 * @param 
 * @arrange (512.笔记) www.q1010.com
 **/
<style type="text/css">
* { padding: 0; margin: 0; list-style: none; }
.bigbox { float: left; width: 300px; position: relative; margin: 10px 0 0 10px; }
.bigbox .photo { width: 299px; height: 225px; overflow: hidden; }
.bigbox li { width: 299px; vertical-align: middle; }
.bigbox li img { width: 299px; float: left; }
.bigbox .btn li { width: 47px; height: 30px; background: #EEE; float: left; line-height: 30px; text-align: center; border: solid 1px #ccc; margin: 1px 1px 0 0; display: inline; cursor: pointer; font-weight: bold; font-family: "微软雅黑"; color: #666; }
.bigbox .btn li.cur { background: #666; color: #FFF; border: 1px solid #666666; }
.bigbox .prev { position: absolute; top: 100px; background: #000; height: 20px; width: 20px; display: block; opacity: 0.5; color: #fff; text-align: center; cursor: pointer; }
.bigbox .next { position: absolute; top: 100px; right: 1px; background: #000; height: 20px; width: 20px; display: block; opacity: 0.5; color: #fff; text-align: center; cursor: pointer; }
</style>

js:

/**
 * @param 
 * @arrange (512.笔记) www.q1010.com
 **/
<script src="/jquery-1.6.4.min.js" type="text/javascript"></script>
<script>
function unlimtTab(box,photo,btn){
var box = $(box);
var photo = $(photo);
var btn = $(btn);
box.each(function(i) {
    btn.eq(i).find("li").hover(function(){
        var key = $(this).index();
        btn.eq(i).find("li").removeClass("cur").eq(key).addClass("cur");
        photo.eq(i).find("li").hide().eq(key).show();
        });
     });
};
unlimtTab(".bigbox",".photo",".btn")
</script>

html:

<div class="bigbox">
  <ul class="photo">
    <li><img src="/images/b.jpg"></li>
    <li><img src="/images/Hydrangeas.jpg"></li>
    <li><img src="/images/Jellyfish.jpg"></li>
    <li><img src="/images/Koala.jpg"></li>
    <li><img src="/images/Lighthouse.jpg"></li>
    <li><img src="/images/Penguins.jpg"></li>
  </ul><!--<span class="prev"><</span> <span class="next">></span>-->
  <ul class="btn">
    <li class="cur">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div><div class="bigbox">
  <ul class="photo">
    <li><img src="/images/b.jpg"></li>
    <li><img src="/images/Hydrangeas.jpg"></li>
    <li><img src="/images/Jellyfish.jpg"></li>
    <li><img src="/images/Koala.jpg"></li>
    <li><img src="/images/Lighthouse.jpg"></li>
    <li><img src="/images/Penguins.jpg"></li>
  </ul><!--<span class="prev"><</span> <span class="next">></span>-->
  <ul class="btn">
    <li class="cur">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div><div class="bigbox">
  <ul class="photo">
    <li><img src="/images/b.jpg"></li>
    <li><img src="/images/Hydrangeas.jpg"></li>
    <li><img src="/images/Jellyfish.jpg"></li>
    <li><img src="/images/Koala.jpg"></li>
    <li><img src="/images/Lighthouse.jpg"></li>
    <li><img src="/images/Penguins.jpg"></li>
  </ul><!--<span class="prev"><</span> <span class="next">></span>-->
  <ul class="btn">
    <li class="cur">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div><div class="bigbox">
  <ul class="photo">
    <li><img src="/images/b.jpg"></li>
    <li><img src="/images/Hydrangeas.jpg"></li>
    <li><img src="/images/Jellyfish.jpg"></li>
    <li><img src="/images/Koala.jpg"></li>
    <li><img src="/images/Lighthouse.jpg"></li>
    <li><img src="/images/Penguins.jpg"></li>
  </ul><!--<span class="prev"><</span> <span class="next">></span>-->
  <ul class="btn">
    <li class="cur">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div>
<div class="bigbox">
  <ul class="photo">
    <li><img src="/images/b.jpg"></li>
    <li><img src="/images/Hydrangeas.jpg"></li>
    <li><img src="/images/Jellyfish.jpg"></li>
    <li><img src="/images/Koala.jpg"></li>
    <li><img src="/images/Lighthouse.jpg"></li>
    <li><img src="/images/Penguins.jpg"></li>
  </ul><!--<span class="prev"><</span> <span class="next">></span>-->
  <ul class="btn">
    <li class="cur">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div><div class="bigbox">
  <ul class="photo">
    <li><img src="/images/b.jpg"></li>
    <li><img src="/images/Hydrangeas.jpg"></li>
    <li><img src="/images/Jellyfish.jpg"></li>
    <li><img src="/images/Koala.jpg"></li>
    <li><img src="/images/Lighthouse.jpg"></li>
    <li><img src="/images/Penguins.jpg"></li>
  </ul><!--<span class="prev"><</span> <span class="next">></span>-->
  <ul class="btn">
    <li class="cur">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div><div class="bigbox">
  <ul class="photo">
    <li><img src="/images/b.jpg"></li>
    <li><img src="/images/Hydrangeas.jpg"></li>
    <li><img src="/images/Jellyfish.jpg"></li>
    <li><img src="/images/Koala.jpg"></li>
    <li><img src="/images/Lighthouse.jpg"></li>
    <li><img src="/images/Penguins.jpg"></li>
  </ul><!--<span class="prev"><</span> <span class="next">></span>-->
  <ul class="btn">
    <li class="cur">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div><div class="bigbox">
  <ul class="photo">
    <li><img src="/images/b.jpg"></li>
    <li><img src="/images/Hydrangeas.jpg"></li>
    <li><img src="/images/Jellyfish.jpg"></li>
    <li><img src="/images/Koala.jpg"></li>
    <li><img src="/images/Lighthouse.jpg"></li>
    <li><img src="/images/Penguins.jpg"></li>
  </ul><!--<span class="prev"><</span> <span class="next">></span>-->
  <ul class="btn">
    <li class="cur">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div>
<div class="bigbox">
  <ul class="photo">
    <li><img src="/images/b.jpg"></li>
    <li><img src="/images/Hydrangeas.jpg"></li>
    <li><img src="/images/Jellyfish.jpg"></li>
    <li><img src="/images/Koala.jpg"></li>
    <li><img src="/images/Lighthouse.jpg"></li>
    <li><img src="/images/Penguins.jpg"></li>
  </ul><!--<span class="prev"><</span> <span class="next">></span>-->
  <ul class="btn">
    <li class="cur">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div><div class="bigbox">
  <ul class="photo">
    <li><img src="/images/b.jpg"></li>
    <li><img src="/images/Hydrangeas.jpg"></li>
    <li><img src="/images/Jellyfish.jpg"></li>
    <li><img src="/images/Koala.jpg"></li>
    <li><img src="/images/Lighthouse.jpg"></li>
    <li><img src="/images/Penguins.jpg"></li>
  </ul><!--<span class="prev"><</span> <span class="next">></span>-->
  <ul class="btn">
    <li class="cur">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div><div class="bigbox">
  <ul class="photo">
    <li><img src="/images/b.jpg"></li>
    <li><img src="/images/Hydrangeas.jpg"></li>
    <li><img src="/images/Jellyfish.jpg"></li>
    <li><img src="/images/Koala.jpg"></li>
    <li><img src="/images/Lighthouse.jpg"></li>
    <li><img src="/images/Penguins.jpg"></li>
  </ul><!--<span class="prev"><</span> <span class="next">></span>-->
  <ul class="btn">
    <li class="cur">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div><div class="bigbox">
  <ul class="photo">
    <li><img src="/images/b.jpg"></li>
    <li><img src="/images/Hydrangeas.jpg"></li>
    <li><img src="/images/Jellyfish.jpg"></li>
    <li><img src="/images/Koala.jpg"></li>
    <li><img src="/images/Lighthouse.jpg"></li>
    <li><img src="/images/Penguins.jpg"></li>
  </ul><!--<span class="prev"><</span> <span class="next">></span>-->
  <ul class="btn">
    <li class="cur">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div>

本文来自：http://www.q1010.com/174/2084-0.html

注：关于JavaScript 无限TAB的简单示例的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：TAB