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

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

  • Quản lý mẫu web công ty

    Quản lý mẫu web công ty

    2 tháng trước, 155 Lượt xem

    Xin chào tất cả các khách hàng dùng mẫu web công ty bên netweb, sau đây netweb.vn xin hướng dẫn các bạn quản lý mẫu…

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

Đ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)