0

Javascriptを使用してそれぞれのdivを表示または非表示にするナビゲーションメニューがあるとします。

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#contact">Contact Me</a></li>
</ul>

<script>

$("#tabs a").click(function(e){
    e.preventDefault();
    $(".toggle").hide();
    var toShow = $(this).attr('href');
    $(toShow).show();
});

</script>

<noscript></noscript>Javascriptを有効にしていないユーザーを支援するためにタグを使用する必要があることはわかっています。

質問

どうすればこれを行うことができますか？

javascriptが無効なユーザーの場合、「ホーム」または「連絡先」をクリックして、それぞれ「home.php」または「contact.php」に移動できるようにします。

4

4 に答える 4

4

これはうまくいくはずです：

<ul>
<li><a data-target="#home" href="home.php">Home</a></li>
<li><a data-target="#contact" href="contact.php">Contact Me</a></li>
</ul>

<script>

$("#tabs a").click(function(e){
    e.preventDefault();
    $(".toggle").hide();
    var toShow = $(this).data('target');
    $(toShow).show();
});

</script>

noscript を使用すると、別のメニューを追加できますが、利用可能なメニューを変更することはできません。上記のようなものがあると、js を持っていない人はクリック ハンドラーをトリガーせず、デフォルトの get が実行されます。js が有効になっている場合、クリック機能が実行され、e.preventDefaultブラウザが別のページにリダイレクトされなくなります。

このソリューションでは、重複したメニューも必要ありません。何らかの方法で変更する必要がある場合は、実際には 1 つではなく 2 つのメニューの HTML を変更する必要があります。

于 2012-12-05T12:08:51.763 に答える
1

このような：

<ul id="scriptMenu" style="display:none">
    <li><a href="#home">Home</a></li>
    <li><a href="#contact">Contact Me</a></li>
</ul>

<noscript>
    <ul>
        <li><a href="home.php">Home</a></li>
        <li><a href="contact.php">Contact Me</a></li>
    </ul>
</noscript>

<script>
    $(function(){
        $("#scriptMenu").show()
    });
</script>

scriptMenuJavaScript をサポートしていないブラウザでは非表示になります。
JavaScript をサポートするブラウザーは、タグ内の要素をレンダリングせず、scriptMenuリストを表示します。

実施例

于 2012-12-05T12:05:12.247 に答える
1

これは簡単な試用版であり、コードはテストされていないことに注意してください

完全なページへのリンクをアンカーに残し、プログラムで「.php」を削除します

<ul>
<li><a href="home.php">Home</a></li>
<li><a href="contact.php">Contact Me</a></li>
</ul>

<script>

$("#tabs a").click(function(e){
    e.preventDefault();
    $(".toggle").hide();
    var toShow = $(this).attr('href');
    toShow=toShow.split(".");
    toShow=toShow[0];
    $("#"+toShow).show();
});

</script>
于 2012-12-05T12:06:10.613 に答える
0

実際のリンクを href として「a」タグに追加し、jQuery で最後に return false を追加するのはどうでしょうか。これにより、Javascript がトリガーされた場合に、ブラウザーが href 要素で指定されたリンクを実行しなくなります。Javascript が有効になっていない場合は、href 要素にリンクするだけです。ノスクリプトは必要ありません。

<ul>
<li><a href="home.php">Home</a></li>
<li><a href="contact.php">Contact Me</a></li>
</ul>

<script>
$("#tabs a").click(function(e){
    e.preventDefault();
    $(".toggle").hide();
    var toShow = $(this).attr('href');
    $(toShow).show();
    return false;
});    
</script>
于 2012-12-05T12:07:56.210 に答える