今天刚学了jQuery ，今天利用jQuery的语法一行来写出选项卡
生活随笔
收集整理的這篇文章主要介紹了
今天刚学了jQuery ，今天利用jQuery的语法一行来写出选项卡
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
選項卡的原理很簡單，鼠標移上去就讓其顯示一下的卡片信息
廢話不多少，直接上代碼
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}ul,ol,li {list-style: none;}.box {width: 600px;height: 400px;border: 10px solid pink;margin: 50px auto;}ul {width: 100%;height: 60px;overflow: hidden;}ul>li {width: 200px;height: 100%;text-align: center;line-height: 60px;font-size: 40px;color: #fff;background-color: skyblue;cursor: pointer;float: left;}ul>li.active {background-color: orange;}ol {width: 100%;height: 340px;position: relative;}ol>li {width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-color: purple;font-size: 100px;line-height: 340px;color: #fff;text-align: center;display: none;}ol>li.active {display: block;}</style> </head><body><div class="box"><ul><li class="active">1</li><li>2</li><li>3</li></ul><ol><li class="active">1</li><li>2</li><li>3</li></ol></div><script src="./js/jQuery.min.js"></script><script>$('ul>li').on('mouseover', function() {$(this).addClass('active').siblings().removeClass('active').parent().siblings().children().removeClass('active').eq($(this).index()).addClass('active')})</script> </body></html>總結
以上是生活随笔為你收集整理的今天刚学了jQuery ，今天利用jQuery的语法一行来写出选项卡的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 王者荣耀李小龙的动作怎么领
- 下一篇： 钉钉怎么弄企业