Question

我正在使用引导标签。我想在选项卡上使用向下箭头表示活动类。

<ul class="nav nav-tabs" style="font-size:20px;">
                  <li><a  class="active" data-toggle="tab" href="#menu1"><span class="glyphicon glyphicon-sound-dolby"></span></a></li>
                  <li><a data-toggle="tab" href="#menu2"><span class="glyphicon glyphicon-send"></span></a></li>
                  <li><a data-toggle="tab" href="#menu3"><span class="glyphicon glyphicon-earphone"></span></a></li>
                  <li><a data-toggle="tab" href="#menu4"><span class="glyphicon glyphicon-send"></span></a></li>
                </ul>

这是活动课程的CSS。

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    color: #555;
    cursor: default;
    background-color: #fff;
    background: url('../image/down.png') no-repeat !important;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}

现在它只显示活动课程的白色背景。但不是形象。请帮助我。谢谢

Answer 1

css类中的问题。您已将其分配给适当的选择器。在分配给tag的html类中，但是在css中

。你需要正确的css规则。所以你的代码看起来像这样：

function appendUserImage(i,key) {
        dict = {
            'key': key// pk value of post sent to retrieve offers to it
        };
        generateCSRFToken();
        $.ajax({
            url: "/get_user/",
            method: "POST",
            data: JSON.stringify(dict),
            success: function (data) {
                $('<img />', {
                    src: data["image"],
                    class: "offer_user_image"
                }).appendTo($('.offer:nth-child(' + (i+1) + ')'))

            },
            error: function () {
            }

        });

    }

Answer 2

或者你可以试试这个 -

工作代码段

 .nav li.active  {  
    
    cursor: default; 
    background: url('https://www.w3schools.com/css/img_fjords.jpg') no-repeat !important;
     background-size: contain;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
  background-color: transparent !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" style="font-size:20px;">
                  <li><a  class="active" data-toggle="tab" href="#menu1"><span class="glyphicon glyphicon-sound-dolby"></span></a></li>
                  <li><a data-toggle="tab" href="#menu2"><span class="glyphicon glyphicon-send"></span></a></li>
                  <li><a data-toggle="tab" href="#menu3"><span class="glyphicon glyphicon-earphone"></span></a></li>
                  <li><a data-toggle="tab" href="#menu4"><span class="glyphicon glyphicon-send"></span></a></li>
                </ul>

在活动类css引导程序中添加背景图像

2 个答案: