來源：風中的妖嬈落葉 發(fā)布時間：2018-11-22 14:50:50 閱讀量：1524
1.隔行變色
<script>/*$('#table tr:even').css('background','#abcdef');$('#table tr:odd').css('background','yellow');*/$('#table tr').filter(':even').css('background','#abcdef').end().filter(':odd').css('background','yellow');</script>2.tab標簽頁效果
- <style>
- #content div{
- width:300px;
- height:200px;
- border:1px solid #abcdef;
- display:none;
- }
- #content div.show{
- display:block;
- }
- </style>
- <body>
- <ul id='ul' style='padding:0 15px;border:1px solid #abcdef;float:left;margin-right:3px;'>
- <li class="current">php</li>
- <li>ruby</li>
- <li>java</li>
- </ul>
- <div id="content">
- <div class="show">php......介紹</div>
- <div>ruby......介紹</div>
- <div>java......介紹</div>
- </div>
- </body>
- <script>
- var ul = document.getElementById('ul');
- var li = document.getElementByTagName('li');
- var content = document.getElementById('content');
- var div = content.getElementByTagName('div');
- for(var i = 0; i < li.length; i++){
- li[i].index = i;
- li[i].onclick = function(){
- for(var i = 0; i < li.length; i++){
- li[i].className = '';
- div[i].style.display='none';
- };
- this.className = 'current';
- div[this.index].style.display='block';
- }
- };
- </script>
- //JQuery的寫法
- <script>
- $('#ul li').click(function(){
- //1/點擊li時要切換樣式
- //$(this).addClass('current').siblings().removeClass('current');
- //2.根據(jù)li的索引值來確定哪個div顯示，其他div隱藏
- $('#content>div').eq($(this).index()).show().siblings().hide();
- $(this).addClass('current').siblings().removeClass('current').parent().next().children().eq($(this).index()).show().siblings().hide();
- });
- </script>
13450931319
微信登錄
QQ登錄
微博登錄
售前咨詢
