jquery tabs 一个站点下多次使用问题

Question

本帖最后由 xianghongai 于 2012-09-06 09:28:50 编辑

Answer 1

没看懂你的要求是什么。你要想用多个这个的tab，可以把这个作为模板，然后用clone()方法，把clone出的添加到DOM上。或者你把这种结构处理成对象使用

Answer 2

<script type="text/javascript">
var createHtml = function (parentClass,childClass,childClass2){
var html = "<div class='"+ parentClass +"'><ul class='"+ childClass +"'<li><a>1</a></li><li><a>2</a></li><li><a>3</a></li></ul>";
html += "<div class='"+ childClass2 +"'><div class=\"tabs-panel\">4</div><div class=\"tabs-panel\">5</div><div class=\"tabs-panel\">6</div></div></div>";
document.write(html);
}
</script>调用：<script type="text/javascript">createHtml("tabs","tabs-nav","tabs-con");</script>也不知道你<li>和<div class="tabs-panel">的个数， 反正你可以改进一下，里面的你可以程序循环

Answer 3

<style type="text/css">
    .tabs-nav{height:30px}
    .tabs-panel{display: none;}
    .tabs-nav li{width:40px;float: left;}
    .onli{border:1px solid red}
</style>
<div class="tabs">
  <ul class="tabs-nav">
  <li><a>AA.</a></li>
  <li><a>BB.</a></li>
  <li><a>CC.</a></li>
  </ul>
  <div class="tabs-con">
  <div class="tabs-panel">11111111</div>
  <div class="tabs-panel">2222222</div>
  <div class="tabs-panel">3333333</div>
  </div>  
</div><div class="tabs">
    <ul class="tabs-nav">
        <li><a>AA.</a></li>
        <li><a>BB.</a></li>
        <li><a>CC.</a></li>
    </ul>
    <div class="tabs-con">
        <div class="tabs-panel">11111111</div>
        <div class="tabs-panel">2222222</div>
        <div class="tabs-panel">3333333</div>
    </div>
</div>
<script type="text/javascript">
    function tabs(a,b,c){
        $(b+" "+c+":first-child").show();
        $(a+" li:first-child").addClass("onli");
        $(c).each(function(i){
            (function(n){
                $(a+" li").eq(n).mouseover(function(){
                    $(this).addClass("onli").siblings().removeAttr("class");
                    $(c).eq(n).show().siblings().hide();
                })
            })(i);
        })
    }
    tabs(".tabs-nav",".tabs-con",".tabs-panel");
</script>