JavaScript 无限TAB的简单示例

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


/**
 * @param 
 * @arrange (512.笔记) jb51.cc
 **/
<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.笔记) jb51.cc
 **/
<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>

JavaScript 无限TAB的简单示例

猜你在找的JavaScript相关文章