Code chọn xe theo màu sắc áp dụng cho wordpress

4 năm trước, Code theme wordpress, Code website hay dùng, Phát triển website, 556 Lượt xem

ở bài viết này mình áp dụng trên acf pro các bạn tạo trường acf theo code add vào là chạy ok.

áp dụng cho boostrap 3

<!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="tab-content">
    <?php $i = 1; ?>
    <?php while (has_sub_field('nhieu_mau_xe')) : ?>
        <div id="<?php the_sub_field('chon_mau'); ?>" class="tab-pane fade <?php if ($i == 1) echo 'in active'; ?>">
            <div class="hinhxeok">
                <img src="<?php the_sub_field('hinh_xe'); ?>" alt="">
            </div>

        </div>
        <?php $i++; ?>
    <?php endwhile; ?>
</div>


<?php if (get_field('nhieu_mau_xe')) : ?>
    <div class="icon-mau-xe">
        <ul class="icon-ul">
            <?php $i = 1; ?>
            <?php while (has_sub_field('nhieu_mau_xe')) : ?>
                <li class="icon-xe-li <?php if ($i == 1) echo 'active'; ?>">
                    <a data-toggle="tab" href="#<?php the_sub_field('chon_mau'); ?>">
                        <p class="icon-mau-xe1 <?php the_sub_field('chon_mau'); ?>"></p>
                        <?php the_sub_field('tieu_de_mau_xe'); ?>
                    </a>
                </li>
                <?php $i++; ?>
            <?php endwhile; ?>

        </ul>
    </div>
<?php endif; ?>


<style>
    .icon-mau-xe1.mauden {
        background: #000;
    }

    .icon-mau-xe1.maucam {
        background: #dd6e00;
    }

    .icon-mau-xe1.mauxam {
        background: #c4c4c4;
    }

    .icon-mau-xe1.mautrang {
        background: #fff;
    }

    .icon-mau-xe1.maudo {
        background: #ff0000;
    }

    .icon-mau-xe1.mauvang {
        background: #f4da03;
    }

    li.icon-xe-li a {
        color: #ff000000;
    }

    li.icon-xe-li a:active,
    a:focus,
    a:hover {
        color: #000 !important;
    }


    p.icon-mau-xe1 {
        /* background: #333; */
        width: 74px;
        height: 36px;
        border: 1px solid #333;
    }

    li.icon-xe-li {
        display: inline-block;
        color: #333;
        font-size: 15px;
        padding-right: 5px;
    }

    .icon-mau-xe {
        text-align: center;
    }

    @media only screen and (min-width: 900px) {
        .hinhxeok {
            width: 70%;
            margin: auto;
        }
    }
    
</style>
Hình hoàn thành

Bài viết mới cập nhập

  • Hướng dẫn Plugin floating contact

    Hướng dẫn Plugin floating contact

    1 năm trước, 440 Lượt xem

    Netweb xin hướng dẫn cách quản lý Plugin floating contact các bạn nhớ làm theo kỹ tường bước để plugin hoạt động Tính năng: Hiển…

  • Backup Yandex Mail

    Backup Yandex Mail

    2 năm trước, 286 Lượt xem

    Khác với dịch vụ email theo tên của microsoft và google với chi phí đắt đỏ tầm 1tr/năm/1user, vì thế nên netweb khuyên dùng dịch…

Bình luận trên facebook netweb.vn

Gọi netweb Báo giá web Chát Zalo
Chủ đề liên quan theo Tag
, , ,

Đam mê thiết kế web, kinh nghiệm 9 năm trong nghề thiết kế website, đang thiết kế web dạo tại netweb.vn, Callme: 08.9898.2526 (Mr Hải)