當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

今天刚学了jQuery ，今天利用jQuery的语法一行来写出选项卡

發(fā)布時間：2023/12/31 编程问答 24 豆豆

生活随笔收集整理的這篇文章主要介紹了今天刚学了jQuery ，今天利用jQuery的语法一行来写出选项卡小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

選項卡的原理很簡單，鼠標移上去就讓其顯示一下的卡片信息

廢話不多少，直接上代碼

<!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的语法一行来写出选项卡的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。