Javascript 加载时显示默认页面_Javascript_Jquery

Javascript 加载时显示默认页面

javascript jquery

Javascript 加载时显示默认页面,javascript,jquery,Javascript,Jquery,在我的代码中，我想显示页面上第一个链接的默认内容。下面是我的代码，当我点击某个链接加载内容时，相反，我想在页面加载时显示第一个链接内容，在用户点击任何链接后，内容必须得到更改 <!DOCTYPE html> <html> <head> <script src="jquery.js" type="text/javascript"></script> </head> <body> <div id=

在我的代码中，我想显示页面上第一个链接的默认内容。下面是我的代码，当我点击某个链接加载内容时，相反，我想在页面加载时显示第一个链接内容，在用户点击任何链接后，内容必须得到更改

<!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>


展示物品1
展示物品2
展示物品3
$（“#导航a”）。单击（功能（e）{
e、 预防默认值（）；
$（“.toggle”）.hide（）；
var toShow=$（this.attr（'id'）；
$（toShow.show（）；
});

下面是JSFIDLE链接

#content1

不是有效的id。请尝试改用href属性。


<!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>

展示物品1
展示物品2
展示物品3
$（“#导航a”）。单击（功能（e）{
e、 预防默认值（）；
$（“.toggle”）.hide（）；
var toShow=$（this.attr（'id'）；
$（'#'+toShow）.show（）；
});

这样，在页面加载时，您可以通过命令显示打开一个div：在您想要的内容上显示“无”。

只需为默认内容添加另一个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> 
...


默认内容
展示物品1
...

请参见工作

我会稍微更改您的标记，我不确定#在有效的ID值中，您是否可以将其用作链接上的散列/锚定：

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

html: 显示内容1 显示内容2 显示内容3

这里的回答者想说的是，你不小心在ID前面添加了一个

，这违反了标准，你可以在这里了解更多：我认为提问者是故意这样做的，所以他们可以将其用作选择器字符串，但他们可以使用另一个属性，或者在他们选择时假装是#。对不起，问题搞错了，实际上我想显示第一个链接的内容作为默认值。然后只删除显示：没有你想要的行，我已经更正了答案以反映你刚才给我的信息。

<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>

$("#nav a").click(function(e){
    e.preventDefault();
    $(".toggle").hide();
    var toShow = $(this).attr("href");
    $(toShow).show();
}).filter(":first").click();