纯elementor做切换按钮

发表于

通过简单代码做到切换按钮报价单的效果

先放代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
selector{
    --inactive-color: #E2E2E2;
    --padding: 5px;
    --size: 23px;
}
selector.monthly .elementor-widget-container{
    background: var(--inactive-color);
}
selector .elementor-divider{
    position: relative;
    cursor: pointer;
}
selector .elementor-divider:after{
    content: "";
    position: absolute;
    top: var(--padding);
    left: calc(100% - var(--size) - var(--padding));
    height: var(--size);
    width: var(--size);
    background: #fff;
    border-radius: 100%;
    transition: all 0.3s ease-in-out;
}
selector.monthly .elementor-divider:after{
    left: var(--padding);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
.pricing-tables-1{
    display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
$('.price-toggle').on('click', function(){
    $(this).toggleClass('monthly')
    $('.pricing-tables').toggle()
})
})
</script>

视频地址