js和jquery分别实现tab标签页

最新推荐文章于 2021-01-25 16:55:21 发布

栁罗风尘

最新推荐文章于 2021-01-25 16:55:21 发布

阅读量775

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/wujiangwei567/article/details/39429831

版权

jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

首先列出样式和html标签

<style type="text/css">
        *{margin: 0;padding: 0;}
        #myul li {list-style: none; float: left; border: 1px solid #ddd; width: 100px; height: 20px; text-align: center; line-height: 20px;}
        #container div{display: none; width: 303px; height: 300px;  border: 1px solid #ddd; }
        #container .ssd{display: block;}
        .ssl{background: #abcdef;}
  	</style>
  </head>
  <body>
    <div id="tab">
    	<ul id="myul">
    		<li class="ssl">1</li>
    		<li>2</li>
    		<li>3</li>
    	</ul>
    	<div  id="container">
	    	<div class="ssd">woshi1</div>
	    	<div>woshi2</div>
	    	<div>woshi3</div>
    	</div>
    </div>

然后就是原生的js 实现tab标签的代码

 <script type="text/javascript">
        var ul = document.getElementById('myul');
        var li = ul.getElementsByTagName('li');
        var con = document.getElementById('container');
        var div = con.getElementsByTagName('div');
        
        var len = li.length;
        for (var i = 0; i < len; i++) {
        	li[i].index = i;
        	li[i].οnclick=choose;
        	li[i].onmouseover = choose;
        };

        function choose(){
        	for(var j = 0; j < len; j++) {
	        		li[j].className = '';
	        		div[j].style.display = 'none';
	        	}
        	    this.className = 'ssl';
        	    div[this.index].style.display='block';
        }

    </script>

那我们改用jquery实现代码如下

       $('#myul li').click(choose);
       $('#myul li').hover(choose);
        function choose(){
        	$(this).addClass('ssl').siblings().removeClass('ssl');
        	$('#container div').eq($(this).index()).show().siblings().hide();
        }

其实函数还可以简化

function choose(){
        	$(this).addClass('ssl').siblings().removeClass('ssl').parent().next().children().eq($(this).index()).show().siblings().hide();
        }