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" id="b11" onMouseOver="slide(1,1)">体育新闻</div>
    <div class="option2" id="b12" onMouseOver="slide(1,2)"><a href="#">娱乐新闻</a></div>
    <div class="option2" id="b13" onMouseOver="slide(1,3)"><a href="#">推荐新闻</a></div>
    <div class="option2" id="b14" onMouseOver="slide(1,4)"><a href="#">推荐新闻</a></div>
  </div>
  <div class="newsBorder">
    <div id="a11" style="display:none;">
	<div class=articleList>
          <ul>
            <li>文字内容</li>
          </ul>
        </div>
    </div>
	
    <div id="a12" style="display:none;">
	<div class=articleList>
          <ul>
            <!-- 娱乐新闻 -->
            <li><a href="#">文字内容文字内容</a></li>
          </ul>
        </div>
    </div>

    <div id="a13" style="display:none;">
	<div class=articleList>
          <ul>
            <!-- 推荐新闻 -->
            <li><a href="#">文字内容文字内容文字内容</a></li>
          </ul>
        </div>
    </div>

    <div id="a14" style="display:none;">
	<div class=articleList>
          <ul>
            <!-- 推荐新闻 -->
            <li><a href="#">文字内容文字内容文字内容文字内容</a></li>
          </ul>
        </div>
    </div>
  </div>
</div>
<div class="indexNews">
  <div class="top">
    <div class="option2" id="b21" onMouseOver="slide(2,1)">体育新闻</div>
    <div class="option2" id="b22" onMouseOver="slide(2,2)"><a href="#">娱乐新闻</a></div>
    <div class="option2" id="b23" onMouseOver="slide(2,3)"><a href="#">推荐新闻</a></div>
  </div>
  <div class="newsBorder">
    <div id="a21" style="display:none;">
	<div class=articleList>
          <ul>
            <li><a href="#">"文字内容文字内容文字内容文字内容</a></li>
            <li><a href="#">文字内容文字内容文字内容文字内容文字内容文字内容文字内容</a></li>
          </ul>
        </div>
    </div>
	
    <div id="a22" style="display:none;">
	<div class=articleList>
          <ul>
            <li><a href="#">文字内容文字内容文字内容</a></li>
          </ul>
        </div>
    </div>
    <div id="a23" style="display:none;">
	<div class=articleList>
          <ul>
            <li><a href="#">文字内容</a></li>
          </ul>
        </div>
    </div>    
  </div>
</div>
<div class="indexNews">
  <div class="top">
    <div class="option2" id="b31" onMouseOver="slide(3,1)">体育新闻</div>
    <div class="option2" id="b32" onMouseOver="slide(3,2)"><a>娱乐新闻</a></div>
  </div>
  <div class="newsBorder">
    <div id="a31" style="display:none;">
	<div class=articleList>
          <ul>
            <li><a href="#">文字内容文字内容</a></li>
          </ul>
        </div>
    </div>
    <div id="a32" style="display:none;">
	<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>

     

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