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

3 năm trước, Code theme wordpress, Code website hay dùng, Phát triển website, 483 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

    10 tháng trước, 339 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

    12 tháng trước, 229 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)