Elementor: Thêm URL cho Tabs và ý tưởng “độc nhất vô nhị”

Đời lập trình viên vui lắm, nhất là khi khách hàng nảy ra ý tưởng “độc nhất vô nhị”. Chuyện là thế này, mình được yêu cầu thêm URL riêng cho từng tab trong Mega Menu của Elementor. Nghe xong muốn…khóc luôn á!

Cảm giác lúc đó giống như bạn đang cố nhét một con voi vào trong tủ lạnh vậy. Bất khả thi!

Nhưng với một lập trình viên dày dạn kinh nghiệm như mình (ho khụ), chuyện nhỏ! Nghĩ là làm, mình lập tức lao vào nghiên cứu như một nhà khoa học điên.

Hành Trình Gian Nan Bắt Đầu

Khó khăn đầu tiên: Elementor không hỗ trợ tính năng này. Các add-on cũng “lắc đầu ngao ngán”.

Thế là “plan B” được kích hoạt: Tự code!

Sau một hồi vật lộn, mình phát hiện ra widget JetTabs cho phép gán ID cho từng tab. Ánh sáng cuối đường hầm!

JavaScript - Vị Cứu Tinh

Với ID trong tay, mình tự tin “triệu hồi” JavaScript. Và đoạn code “thần thánh” ra đời:

<!-- Nhớ thêm thư viện jQuery từ CDN của Google trước nhé -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    // Khi click vào link có id là link1
    $("#link1").click(function() {
        openLink();
    });
    // Khi click vào link có id là link2
    $("#link2").click(function() {
        openLink();
    });
    // Hàm mở liên kết trong tab hiện tại
    function openLink() {
        window.open("#", "_self");
    }
});
</script>

Giải Mã Thần Chú

• #link1, #link2: ID của các tab.

• #, _self: Thay bằng URL và kiểu mở tab bạn muốn.

Chỉ cần thêm đoạn code này vào widget HTML là xong!

Chiến Thắng Quay Về

Chứng kiến code chạy ngon lành, mình như trút được gánh nặng ngàn cân. Khách hàng vui, mình cũng được phen nở mày nở mặt.

Bài học rút ra: Đừng bao giờ bỏ cuộc! JavaScript luôn là người bạn đồng hành đáng tin cậy.

Hy vọng câu chuyện của mình giúp ích cho các bạn. Chúc anh em thành công, và đừng quên thêm chút hài hước vào cuộc sống nhé!