显示加载时的默认页面

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

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

来源

2012-11-13 Mulla Pervez

#content1不是一个有效的ID。尝试使用href属性。

来源

2012-11-13 08:55:24

什么这里的回答者想说的是，你不小心添加在ID前加一个'#'，这是违背标准的，你可以在这里阅读更多的内容：http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id -attr ibute-in-html – h2ooooooo

我认为提问者故意这样做，所以他们可以使用它作为选择器字符串，但他们可以使用另一个属性，或者只是在选择时假装＃。 –

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

这样你就可以在页面加载时通过省略显示来打开一个div：没有关于你想要的内容。

来源

2012-11-13 08:55:40 Salketer

对不起，问题其实我想显示第一个链接的内容为默认。 –

然后只删除显示：没有你想要的行，我已经更正了答案，以反映你刚给我的信息。 – Salketer

只需要添加另外的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> 
...

见工作example

来源

2012-11-13 08:57:22 Nelson

我会改变你的标记位，进出口不肯定＃在有效的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-13 08:59:18 voigtan

显示加载时的默认页面

回答

相关问题