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 来在页面加载时打开一个 div。

于 2012-11-13T08:55:40.183 回答
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

#content1不是有效的身份证件。尝试改用 href 属性。

于 2012-11-13T08:55:24.093 回答
0

我会稍微更改您的标记，我不确定 # 在有效的 ID 值中，您可以将它用作链接上的哈希/锚点：

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

当页面加载时，每个块都是隐藏的，我们找到所有的 a 元素并在它们上绑定一个点击事件。之后我们过滤掉第一个并用jquery触发它的点击事件。

html: 显示内容 1 显示内容 2 显示内容 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>

和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 回答