javascript - 入力ラジオ属性はデフォルトで選択されていますが、ページを更新した後に表示された効果が選択されないのはなぜですか?

Question

リーリー

入力後のデフォルトの表示効果は次のようになります:

現在は次のようになっており、選択されていません:

入力の属性を確認しました: <input type="radio" name="tab-radio" class="tab-radio" id="tab-radio-1" checked> ; 、更新しても表示されないのはなぜですか？ラベルを再度クリックした場合にのみ、非表示のコンテンツが表示されますか?

私は js を書きませんでした。すべて CSS でした。

＃＃＃ありがとう！

Answer 1

djyuning に感謝します:

リーリー リーリー

Answer 2

あなたのHTML構造がよくわかりません。私の意見では、上のボタンと下のコンテンツは平行であるべきですが、あなたのものは垂直です。

また、同じ名前が設定されている限り、input:radio は自動的に選択を切り替えることができ、スクリプトが選択を変更しても意味がありません。

ステータス $(#selector)[0].checked を取得します。ここで [0] に注意してください。プロパティを読み取るには、jQuery オブジェクトを Dom オブジェクトに変換する必要があります。

これは prop(name,bool) です。attr は使用しないでください。

解決策について話しましょう。
まず、最初の入力にchecked属性を追加して、ページが読み込まれたときに選択されるようにする必要があります。
次に、js を使用して、すべての入力状態をトラバースするために使用される listen メソッドを作成する必要があります。
次に、変更イベントを入力にバインドし、値が変更されたときに状態を再度トラバースする必要があります。
最後に、クリック後にページを再度更新し、クリックしたばかりの場所を強調表示したい場合は、Cookie プラグインを使用する必要がある場合があります。
原則: ページがロードされ、初期化され、一度走査され、フォームが選択されてから再度走査されます。