顯示加載時的默認頁面

在我的代碼中，我想顯示頁面上第一個鏈接的默認內容。下面是我的代碼，在這裏，當我點擊某個鏈接時，它加載它的內容，而不是我想顯示的第一個鏈接內容在頁面加載，在任何鏈接的用戶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

顯示加載時的默認頁面

回答

相關問題