Click on image to open Text

时间:2017-12-24 作者:Katie N.

我现在使用的是Tabby响应式选项卡,但我想知道是否有人知道如何制作一个选项卡部分,在该部分中,您单击图像,就会出现文本而不是标准的文本选项卡?我必须使用CSS还是可以在Wordpress中完成?谢谢

1 个回复
SO网友:signal2013

您当然可以通过CSS轻松完成类似的操作。

然而,要知道WordPress中有哪些选项可用,也许您可以提供更多关于如何工作的详细信息。。。如有必要,您能否提供一个屏幕截图(使用PowerPoint或Google Drive绘图)来制作大纲。

下面是一个如何通过CSS在第一个选项卡中使用图像的示例(如果这是您想要的)。

这一个使用css作为您提到的选项卡插件。要获得任何选项卡插件的确切css,请使用浏览器开发人员工具检查元素。(例如,右键单击选项卡,然后选择Inspect 在Google Chrome中)

快速技巧,设置背景图像并使文本透明。通常,选中的选项卡会有额外的css,如active 在它的class属性中。。。(在您使用的选项卡插件中,他们添加了类名:responsive-tabs__list__item--active). 因此,为了获得良好的效果,请将所有选项卡的不透明度设置为较低,并将活动选项卡的不透明度设置为1。

#tablist1-tab1 {
    color: transparent;
    background-image: url(\'{image url}\');
    opacity: 0.2;
}
.responsive-tabs__list__item--active{
    opacity: 1!important;
}
编辑:编辑!important 添加到此处只是为了快速覆盖所有可能性。但是,请进行相应的测试,如果没有必要,请将其移除。或者,如果需要,修改现有css代码以完全避免。

结束

相关推荐

jQuery Tabs in Shortcode API

html原型的Pastebin和我对wp函数的尝试->http://pastebin.com/91zBv8sk我想要一个简单的符号,以便新用户可以轻松使用。这样的话:[选项卡]第一个选项卡的内容第二个选项卡的内容[/选项卡]我理解为什么函数的符号是错误的,但我想我会放弃我最好的尝试。