Question

我正在为我的公司建立一个网站，并且我正在尝试使用代表不同细分的三个不同图标创建一个部分。

我在图标下面有文字内容，我希望根据点击的图标进行更改。在this website中可以看到类似的部分（向下滚动到＆＃34;服务＆＃34;部分）。

我是一个完全的初学者，我使用了名为Divi的多用途主题的Wordpress。我想通过使用jQuery（？）我可以获得类似的结果。但是，如果能让工作变得更轻松，我也不介意使用插件。

非常感谢任何帮助！

Answer 1

由于您正在使用 WordPress ，因此您无需处理jQuery以获取标签。

可以用于这些标签的插件示例是Tabby Responsive Tabs

在任何情况下，Tabs关键字都是您正在寻找的，并且由于您说您是初学者，所以任何免费或高级Tabs插件都应该为您完成工作。

Answer 2

edit =＆gt;作为你的初学者，你应该使用像布鲁诺科斯建议的插件，虽然我会留下我的答案以防万一其他人发现它有用

我不确定插件，但在纯文本编辑器中你可以尝试这个（它相对容易让你的头脑）：

//the Cartman image. Notice the onclick and how it launches the Cartman function below 
<img src="http://www.iconarchive.com/download/i33463/xtudiando/south-park/Cartman.ico" onclick="cartman()">

//the kenny image. This one launches the Kenny function
<img src="http://icons.iconarchive.com/icons/xtudiando/south-park/128/Kenny-icon.png" onclick="kenny()">

//This is the p (paragraph) tag where we will inject our text 
<p id="text1"></p>


<script>

//This is some simple javascript. The first function is to inject the Kenny text between the <p></p> tags with the "id" "text1".
function kenny(){
document.getElementById("text1").innerHTML = "Oh my god, you killed Kenny!";
}

//this function injects the Cartman text
function cartman(){
document.getElementById("text1").innerHTML = "Screw you guys I'm going home";
}

</script>

这里的例子http://js.do/code/131702去小提琴吧！使用复制/粘贴，看看是否可以添加其他图像和文本

Answer 3

看看它：jQuery UI Library和里面的一个小部件。

https://jqueryui.com/tabs/

我认为您不仅可以通过在JS代码中包含内容而且可以切换帖子/页面块的可见性而感到高兴。它将允许您拥有可编辑的简易内容。

jQuery UI很受欢迎，但你可以在没有额外插件的情况下制作它。

例如：

$(document).ready(function(){
  $('.tabToggler').on('click', function(e){
    e.preventDefault();

    var $tabToggler = $(e.target);
    var $tabId = $tabToggler.data('id');

    $('.tab').hide();
    $('.tab[data-id="' + $tabId + '"]').show();
  })
});

.tabToggler {
  display: inline-block;
  width: 30px;
  height: 30px;
  font-size: 10px;
  color: #fff;
  font-family: sans-serif;
  text-decoration: none;
}

.tabToggler[data-id="1"]{
  background:red
}

.tabToggler[data-id="2"]{
  background:green
}

.tabToggler[data-id="3"]{
  background:blue
}

.tab {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="tabToggler" data-id="1">First ICO</a>
<a href="#" class="tabToggler" data-id="2">Second ICO</a>
<a href="#" class="tabToggler" data-id="3">Third ICO</a>

<div class="tab" data-id="1">Content 1</div>
<div class="tab" data-id="2">Content 2</div>
<div class="tab" data-id="3">Content 3</div>

如果您需要一些额外的解释，我可以用它来更新我的答案。

单击不同图标时更改文本内容

3 个答案: