js实现多个滑动门在同一个页面展示效果

        多个滑动门在同一个页面展示，在工作小组里面，一直是一个让人比较纠结的问题~学习库里面有一个技术同事5年前给封装的控件，大家就一直在用复用那个。

        最近项目里面用到的这个效果非常多，每次都要调用那个js控件，还得按规则匹配相应的id，真心觉得麻烦，就在想，为嘛不自己写一个可以通用的~

        于是，就有了下面这个脚本效果：

        js：  

<script type="text/javascript" >
  var arrayObj = [' ',' ',' ',' ',' ',' ',' '];
  function slide(index,id){
		    var newsObj = document.getElementById('a' +index+arrayObj[index]);
			var newsObj01 = document.getElementById('b' +index +arrayObj[index]);
			var obj = document.getElementById('a'+index+ id);
			var obj01 = document.getElementById('b'+index+ id);
			if(newsObj){
				 newsObj.style.display = 'none';
				 newsObj01.className = 'option2';
			
			}
				obj01.className = 'option1';
				obj.style.display = '';
                arrayObj[index]= id;
	}
</script>

　　html代码（放了三个滑动门作为示例）

<div class="indexNews">
  <div class="top">
    <div class="option2" >体育新闻</div>
    <div class="option2" >娱乐新闻</a></div>
    <div class="option2" >推荐新闻</a></div>
    <div class="option2" >推荐新闻</a></div>
  </div>
  <div class="newsBorder">
    <div >
	<div class=articleList>
          <ul>
            <li>文字内容</li>
          </ul>
        </div>
    </div>
	
    <div >
	<div class=articleList>
          <ul>
            <!-- 娱乐新闻 -->
            <li><a href="#">文字内容文字内容</a></li>
          </ul>
        </div>
    </div>

    <div >
	<div class=articleList>
          <ul>
            <!-- 推荐新闻 -->
            <li><a href="#">文字内容文字内容文字内容</a></li>
          </ul>
        </div>
    </div>

    <div >
	<div class=articleList>
          <ul>
            <!-- 推荐新闻 -->
            <li><a href="#">文字内容文字内容文字内容文字内容</a></li>
          </ul>
        </div>
    </div>
  </div>
</div>
<div class="indexNews">
  <div class="top">
    <div class="option2" >体育新闻</div>
    <div class="option2" >娱乐新闻</a></div>
    <div class="option2" >推荐新闻</a></div>
  </div>
  <div class="newsBorder">
    <div >
	<div class=articleList>
          <ul>
            <li><a href="#">"文字内容文字内容文字内容文字内容</a></li>
            <li><a href="#">文字内容文字内容文字内容文字内容文字内容文字内容文字内容</a></li>
          </ul>
        </div>
    </div>
	
    <div >
	<div class=articleList>
          <ul>
            <li><a href="#">文字内容文字内容文字内容</a></li>
          </ul>
        </div>
    </div>
    <div >
	<div class=articleList>
          <ul>
            <li><a href="#">文字内容</a></li>
          </ul>
        </div>
    </div>    
  </div>
</div>
<div class="indexNews">
  <div class="top">
    <div class="option2" >体育新闻</div>
    <div class="option2" ><a>娱乐新闻</a></div>
  </div>
  <div class="newsBorder">
    <div >
	<div class=articleList>
          <ul>
            <li><a href="#">文字内容文字内容</a></li>
          </ul>
        </div>
    </div>
    <div >
	<div class=articleList>
          <ul>
            <li><a href="#">文字内容文字内容文字内容文字内容文字内容文字内容</a></li>
          </ul>
        </div>
    </div>
  </div>
</div>

　　最后调用js

<script>slide(1,1);slide(2,1);slide(3,1);</script>

     

     每天进步一点点，趣味无限~