Question

我目前正在构建一个Joomla 3网站，我正在尝试使用模块SP标签添加社交图标，以便您可以点击3个不同的标签，为您提供最新消息，推特和其他新闻等信息同一地区。

我设法将选项卡的外观更改为社交图标图像，但我遇到的问题是我只能更改其中的2张图像，而第3张图片重新使用已显示的第2张图像。

以下是来自Firebug的快照（HTML + CSS），因为我的网站目前位于我的本地主机上。

HTML

<div id="sptab121" class="sptab_red">
    <div class="tabs_buttons">
      <div class="tabs_mask">
        <ul class="tabs_container">
          <li class="tab first-tab active></li>
          <li class="tab"></li>
          <li class="tab"></li>
        </ul>
      </div>
    </div>

CSS

#sptab121 .tabs_mask, #sptab121 ul.tabs_container li span {
    height: 105px;
    line-height: 0px;
}
#sptab121 .tabs_mask {
    border-bottom: 1px solid #DDD;
    padding: 100px 0px 5px;
}
#sptab121 .tabs_mask {
    line-height: 0px !important;
}

#sptab121 ul.tabs_container {
    list-style: outside none none;
    margin: 0px !important;
    padding: 0px !important;
}

#sptab121 .first-tab {
    background: transparent url("/images/twitter.png") no-repeat scroll 0% 0% / 50px 55px !important;
    float: left;
    line-height: 13px;
    cursor: pointer;
    padding: 55px 0px 0px;
    margin: 0px 23px 0px 0px;
    width: 50px;
    font-weight: bold;
    text-align: center;
}

#sptab121 ul.tabs_container li.tab {
    background: transparent url("/images/local.png") no-repeat scroll 0% 0% / 50px 55px;
    float: left;
    line-height: 13px;
    cursor: pointer;
    padding: 55px 0px 0px;
    margin: 0px 23px 0px 0px;
    width: 50px;
    font-weight: bold;
    text-align: center;
}

问题是第2和第3 li使用的类是同一个“标签”。我已设法通过为第一个选项卡添加一个类来覆盖第一个类，但我不确定如何为第二个和第三个链接使用不同的图像。

另一个问题是，它不像在li类旁边添加“第二个标签”一样容易，因为模块已经用JavaScript编码，而且我无法找到实现它的代码。

关于我如何改变这一点的任何建议都将非常感激。

Joomla模块的链接：“extensions.joomla.org/extension/sp-tab”

Answer 1

使用伪类

#sptab121 ul.tabs_container li.tab {
    background: transparent no-repeat scroll 0% 0% / 50px 55px;
    float: left;
    line-height: 13px;
    cursor: pointer;
    padding: 55px 0px 0px;
    margin: 0px 23px 0px 0px;
    width: 50px;
    font-weight: bold;
    text-align: center;
}    
#sptab121 ul.tabs_container li.tab:nth-child(2){ 
    background-image: url("https://cdn1.iconfinder.com/data/icons/simple-icons/4096/instagram-4096-black.png") ;
    }
    #sptab121 ul.tabs_container li.tab:nth-child(3){  
    background-image: url("https://cdn3.iconfinder.com/data/icons/picons-social/57/80-google-plus-512.png") ;
    }

<强> Demo

如何为同一级别的不同li设置不同的背景图像

1 个答案: