ナビゲーションリンククラスを変更し、クリック時に選択したdivコンテンツを表示する（JQuery）

debugcn 投稿 Dev

ベン

JQueryを使用してnavリンククラスを追加/削除し、クリックイベントを使用して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>

そしてshowsは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タグを削除しました。ありがとう

ベン

解決済み

私は物事を少し動かして解決策にたどり着きました。これはおそらく最も洗練されたソリューションではありませんが、私が望んでいたタスクを実行します。

これを24時間解決済みとしてマークすることはできませんが、マークは付けます。

ここでJSfiddleを更新しました

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);
    }
});
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]