javascript - 更改导航链接类并在单击时显示选定的 div 内容 (JQuery)

Question

我希望使用 JQuery 添加/删除导航链接类以及使用单击事件显示 div 内容。

目前，我可以选择其中一项，但不能同时进行两项。当我添加点击类时，我无法再切换 div 内容。

这是jsfiddle (不知道为什么它不允许我使用 JS 窗口，所以不得不将它放在 HTML 中，抱歉，又是新手......)

预期:

Onclick 将选定的链接更改为事件类，例如，

<li><a href="javascript:showStep('1');" >1</a></li>

至

<li><a class="active" href="javascript:showStep('1');" >1</a></li>

并显示更改 div 样式:

<div class="toggleStep" id="1">Step 1 </div>

至

<div class="toggleStep" id="1" style="display: block;">Step 1 </div>

编辑:Facundo Corradini 下面的解决方案是一个很好的解决方案，但我希望能用 JQuery 运行它。我已经编辑了问题以将其集中到 JQuery 并删除了 CSS 标签。谢谢

Answer 1

您不需要 JQuery。事实上，你甚至不需要 javascript。您完全可以使用 :target CSS 选择器将正确的 div 显示从无切换到您需要的任何内容(可能是 block )

<nav>
  <ul class="stepProgress">
    <li><a href="#1" >1</a></li>
    <li><a href="#2" >2</a></li>
   </ul>
</nav>
<div id="1"> Step 1 </div>
<div id="2"> Step 2 </div>

div{
  width:200px; height:200px;
  border:2px solid grey;
  text-align:center;
  display:none;
}

div:target{
  display:block;
}

https://jsfiddle.net/19wruzvx/3/