0

私のコードでは、ページの最初のリンクのデフォルトのコンテンツを表示したいと思います。以下は私のコードです、ここで私がそのコンテンツをロードするときにいくつかのリンクをクリックすると、その代わりにロードされたページに最初のリンクコンテンツを表示したいです、ユーザーがリンクをクリックした後、コンテンツは変更されなければなりません 

<!DOCTYPE html>
<html> 
<head>
   <script src="jquery.js" type="text/javascript"></script>
</head>

<body>
<div id="nav">
    <a href="" id="#content1">Show content 1</a>
    <a href="" id="#content2">Show content 2</a>
    <a href="" id="#content3">Show content 3</a>
</div>

<div id="contents" style="width: 200px; height: 40px; border: dotted; margin-top: 20px;">
<div id="content1" class="toggle" style="display:none">show the stuff1</div> 
<div id="content2" class="toggle" style="display:none">show the stuff2</div>
<div id="content3" class="toggle" style="display:none">show the stuff3</div>
</div>
 <script>
     $("#nav a").click(function(e){
     e.preventDefault();
     $(".toggle").hide();
     var toShow = $(this).attr('id');
     $(toShow).show();
     });
 </script>
 </body>
 </html>

以下はJSFiddleリンクです

http://jsfiddle.net/vP3Wj/

4

4 に答える 4

1 
<!DOCTYPE html>
<html> 
<head>
   <script src="jquery.js" type="text/javascript"></script>
</head>

<body>
<div id="nav">
    <a href="" id="content1">Show content 1</a>
    <a href="" id="content2">Show content 2</a>
    <a href="" id="content3">Show content 3</a>
</div>

<div id="contents" style="width: 200px; height: 40px; border: dotted; margin-top: 20px;">
<div id="content1" class="toggle" style="">show the stuff1</div> 
<div id="content2" class="toggle" style="display:none">show the stuff2</div>
<div id="content3" class="toggle" style="display:none">show the stuff3</div>
</div>
 <script>
     $("#nav a").click(function(e){
     e.preventDefault();
     $(".toggle").hide();
     var toShow = $(this).attr('id');
     $('#'+toShow).show();
     });
 </script>
 </body>
 </html>

このようにして、必要なコンテンツの display:none を省略して、ページの読み込み時に 1 つの div を開きます。

于 2012-11-13T08:55:40.183 に答える
0

#content1は有効な ID ではありません。代わりに href 属性を使用してみてください。

于 2012-11-13T08:55:24.093 に答える
0

デフォルトのコンテンツに別の div を追加するだけですが、他の div のようにデフォルトで非表示になることはありません。次のようにします。

<div id="contents" style="width: 200px; height: 40px; border: dotted; margin-top: 20px;">
<div id="defaultcontent" class="toggle">Default Content</div> <!-- HERE -->
<div id="content1" class="toggle" style="display:none">show the stuff1</div> 
...

実施例を見る

于 2012-11-13T08:57:22.527 に答える
0

I would change your markup a bit, Im not to sure that # in a valid ID value, you could just use it as an hash/anchor on your links:

http://jsfiddle.net/vP3Wj/2/

when the page loads every block is hidden, we find all the a-elements and bind an click event on them. after that we filter out the first one of them and trigger its click event with jquery.

html: Show content 1 Show content 2 Show content 3 

<div id="contents">
    <div id="content1" class="toggle">show the stuff1</div>
    <div id="content2" class="toggle">show the stuff2</div>
    <div id="content3" class="toggle">show the stuff3</div>
</div>

and the javascript:

$("#nav a").click(function(e){
    e.preventDefault();
    $(".toggle").hide();
    var toShow = $(this).attr("href");
    $(toShow).show();
}).filter(":first").click();
于 2012-11-13T08:59:18.403 に答える