Question

我希望使用JQuery添加/删除导航链接类，以及使用click事件显示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显示从none切换到你需要的任何东西（可能阻止）

<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/

Answer 2

<强>解决

我通过移动一些东西来达到解决方案。它可能不是最优雅的解决方案，但它完成了我想要的任务。

我不能将此标记为24小时解决，但会这样做。

更新了JSfiddle here

function showStep(selectedStep)
{
//global variables used for eaasy changes if needed
var showDelay = 200; //milliseconds
var hideDelay = 600; //milliseconds
//Create an array of Steps and cycle through them
$('.toggleStep').each(function(index)
{
    //Check if the step was selected
    if ($(this).attr("id") == selectedStep)
    {
        //Show the content
        $(this).show(showDelay);
        //Function to style the active step
        //Prepare the document to handle onClick events
        $(document).ready(function () {
            //handle onClick from the stepProgress class
            $('.stepProgress li a').click(function(e)
            {
                //Remove any active class
                $('.stepProgress li.active').removeClass('active');
                //Add the active class
                var $parent = $(this).parent();
                $parent.addClass('active');
                //Prevent default browser behaviour for urls
                e.preventDefault();
            });
        });
    }
    else
    {
        //Hide all other steps
        $(this).hide(hideDelay);
        $('#landing').hide(hideDelay);
    }
});
}

我还发现删除e.preventDefault();修复了问题：

//Function to style the active step
//Prepare the document to handle onClick events
$(document).ready(function()
{
//handle onClick from the stepProgress class
$('.stepProgress li a').click(function()
{
    //Remove any active class
    $('.stepProgress li.active').removeClass('active');
    //Add the active class
    var $parent = $(this).parent();
    $parent.addClass('active');
});
})

//Function to show the selected step
function showStep(selectedStep)
{
//global variables used for eaasy changes if needed
var showDelay = 200; //milliseconds
var hideDelay = 600; //milliseconds
//Create an array of Steps and cycle through them
$('.toggleStep').each(function(index)
{
    //Check if the step was selected
    if ($(this).attr("id") == selectedStep)
    {
        //Show the selected content only
        $(this).show(showDelay);
    }
    else
    {
        //Hide all other steps
        $(this).hide(hideDelay);
        $('#landing').hide(hideDelay);
    }
});
}

更改导航链接类并在单击时显示所选的div内容（JQuery）

2 个答案: