Thêm URL cho Tabs trong Elementor

Avatar image of Lam LaiLam LaiAugust 30, 20220 comments

Hi mọi người, lâu rồi mình không viết bài trên diễn đàn. Nay mình gặp 1 case cũng thú vị, vì trước giờ mình chưa gặp yêu cầu này lần nào.

Cụ thể, khi sử dụng Mega Menu với nhiều tabs thì Khách hàng của mình còn muốn thêm URL cho từng tab. Lúc mới nghe mình cũng hãi thật sự nhưng dẫu sao đây cũng là một yêu cầu hợp lý nên thôi mình bắt tay vào tìm hiểu luôn.

Kết quả là Elementor không có bất kỳ add-on nào cho trường hợp này. Nên mình nghĩ kiểu gì cũng phải code rồi, sử dụng slow-code lâu ngày thành ra võ “code” cũng đã phế. Đang nghĩ mông lung thì kiểu thì nó cũng phải có chỗ cho mình bắt Trigger. Mình coi lại Tabs (sử dụng JetTabs) thì đúng là có chỗ gán ID thật (Widget mặc định của Elementor không có chỗ gán ID).

Game dễ hơn rồi anh em, cái đồ quỷ này chỉ có JavaScript là xử được thôi. Sau một hồi mò mẫm thì mình xin để lại đoạn code sau cho anh em nào cần nhé! 😀

<!-- Thêm thư viện jQuery từ CDN của Google -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 

<script>
    $(document).ready(function() {

        // Hàm xử lý sự kiện click cho link có id là link1
        $("#link1").click(function() {
            openLink();
        });

        // Hàm xử lý sự kiện click cho link có id là link2
        $("#link2").click(function() {
            openLink();
        });

        // Hàm mở liên kết trong cùng một tab hiện tại
        function openLink() {
            window.open("#", "_self");
        }
    });
</script>

Anh em chỉ cần kéo widget HTML bỏ vào vị trí cần và thêm đoạn code trên vào.

Giải thích:
– #link1, #link2 là ID được gán trong Tabs
– Bạn thay dấu # canh “_self” thành URL mong muốn

Khá đơn giản anh em nhỉ, chúc anh em thành công. 💪

Discuss