实现Tab样式功能

最新推荐文章于 2020-05-28 11:10:12 发布

zhiguo2010

最新推荐文章于 2020-05-28 11:10:12 发布

阅读量485

点赞数

分类专栏： Javascript 文章标签： div server border function html

本文链接：https://blog.csdn.net/zhiguo2010/article/details/5745923

版权

Javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

基本原理：三个tab用三个Div嵌套在母Div中，用style.display控制各个div动作

    <div style=" width:300px; border :solid 2px red">
       <a href ="#" onmouseover ="SelTab('one')">Tab1</a>  
       <a href ="#" onmouseover ="SelTab('two')">Tab2</a>  
       <a href ="#" onmouseover ="SelTab('three')">Tab3</a>  
      <br />
      <br />
       <div id="view1">
        <a href ="#">这是一条新闻</a> <br />
       <a href ="#">这是一条新闻</a> <br />
       <a href ="#">这是一条新闻</a> <br />
       <a href ="#">这是一条新闻</a> <br />
       <a href ="#">这是一条新闻</a> <br />
       </div>
       <div id="view2">
        <a href ="#">view2 中的新闻</a> <br />
       <a href ="#">view2 中的新闻</a> <br />
       <a href ="#">view2 中的新闻</a> <br />
       <a href ="#">view2 中的新闻</a> <br />
       <a href ="#">view2 中的新闻</a> <br />
       </div>
       <div id="view3">
        <a href ="#">Hello world</a> <br />
       <a href ="#">Hello world</a> <br />
         <a href ="#">Hello world</a> <br />
       <a href ="#">Hello world</a> <br />
       <a href ="#">Hello world</a> <br />
       </div>

    </div>
    </form>
</body>
</html>