在加载时显示默认页面
[英]Show the default page on load
问题描述
In my code , I want to show the default content of first link on page . 
在我的代码中，我想显示页面上第一个链接的默认内容。 Below is my code , Here when I click on some link that time it it loads its content , Instead of that I want to show first link content on pages load , After user cliks on any link the the content has to get change 下面是我的代码，在这里，当我单击某个链接时，它加载了其内容，而不是我希望在页面加载时显示第一个链接内容，在用户点击任意链接后，必须更改内容
<!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>
Below is JSFiddle link 以下是JSFiddle链接
4 个解决方案
解决方案1
1 2012-11-13 08:55:40
<!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>
This way you have one div open at page load by ommiting the display:none on the content you want. 这样，通过省略display：none可以在页面加载时打开一个div，而不显示所需的内容。
解决方案2
0 2012-11-13 08:55:24
#content1 is not a valid id. #content1不是有效的ID。 Try using the href attribute instead. 尝试改用href属性。
解决方案3
0 2012-11-13 08:57:22
Just add another div for your default content, but not hided by default like the other divs, so like this: 只需为您的默认内容添加另一个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>
...
解决方案4
0 2012-11-13 08:59:18
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: 我会稍微更改您的标记，我不确定在有效的ID值中是否＃，您可以将其用作链接上的哈希/锚点：
http://jsfiddle.net/vP3Wj/2/ 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. 当页面加载时，每个块都被隐藏，我们找到所有a元素并在其上绑定click事件。 after that we filter out the first one of them and trigger its click event with jquery. 之后，我们过滤掉其中的第一个，并使用jquery触发其click事件。
html: Show content 1 Show content 2 Show content 3 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>
and the javascript: 和javascript：
$("#nav a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr("href");
$(toShow).show();
}).filter(":first").click();
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.