jq 下拉框结合tab切换

最新推荐文章于 2023-04-10 13:21:54 发布

原创

最新推荐文章于 2023-04-10 13:21:54 发布 · 795 阅读

2 ·

CC 4.0 BY-SA版权

该博客介绍了如何结合jQuery和select下拉框实现Tab选项卡切换。通过监听select的change事件，根据选中option的索引来切换对应的Tab内容。示例代码简洁，适合需要自定义样式的场景。

select结合tab选项卡切换；
复制代码就可以看到效果（没写样式，有需要可以自己写）；
其实原理很简单，就是利用select的change事件，获取到select中的option的下标，来改变tab选项卡；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>tab-JQ</title>
    <style>
        * {
   
   
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #wrap {
   
   
            width: 600px;
            margin: 100px auto 0