簡單的jQuery腳本的問題

我是新來的jQuery，我想創建自己的網頁。所以我的問題是，如果我的菜單是使用HREF各項目鏈接到其指定的內容，這樣的..簡單的jQuery腳本的問題

<li><a href="#doc1">Doc1</a></li> 
<li><a href="#doc2">Doc2</a></li> 
<li><a href="#doc3">Doc3</a></li> 

<script> 
$(document).ready(function(() { 
    $(a).click(function() { 
     $(b).show(); 
    }); 
}); 
</script>

我應該把什麼在「A」和「b」？我試着用谷歌搜索這個，但所有的例子都沒有顯示完整的腳本。我以前做這樣的：

<li id="doc1menu">Doc1</li> 
<script> 
$(document).ready(function() { 
    $("#doc1menu").click(function() { 
     $("#doc1content").show(); 
    }); 
}); 
</script>

但現在我想的是可用於我的菜單上的所有項目的單一功能，而不是做一個功能爲每個項目。

來源

2016-02-02 cathy305

HTML

<li><a data-content="doc1" href="#doc1">Doc1</a></li> 
<li><a data-content="doc2" href="#doc2">Doc2</a></li> 
<li><a data-content="doc3" href="#doc3">Doc3</a></li> 

<div id="doc1" class="content"> 
    doc1 
</div> 
<div id="doc2" class="content"> 
    doc2 
</div> 
<div id="doc3" class="content"> 
    doc3 
</div>

腳本

$(function() { 

    //hide all content 
    $(".content").hide(); 

    //meun function 
    $("a").click(function() { 
    var attr = $(this).attr("data-content"); 
    $(".content").hide(); 
    $("#" + attr).show(); 
    }); 

});

https://jsfiddle.net/ynpsq1wp/1/

來源

2016-02-02 03:03:08 daniel

我想你的，它的工作。謝謝。我只是不明白爲什麼單獨的href不足以將菜單項指向它的內容。爲什麼需要包含數據內容？ – cathy305

** href =「＃doc1」**是純html，只是幫助您滾動到書籤的位置，但不包括任何javascript或jquery功能，如** show **和** hide **。 ** data-content **是一個自定義屬性，用於存儲按鈕與內容的關係，當按鈕點擊後獲取的內容ID應該以** $（this）.attr（「data-content」）顯示**。 http://www.hyperlinkcode.com/bookmark.php – daniel

** href =「＃docX」**在這種情況下是無用的，實際上你可以在這裏刪除它。 – daniel

對不起，我原來的答案是錯誤的，因爲我試圖在我的手機上回答這個問題。嘗試使用這個和你想顯示/隱藏的內容來代替'a'。我已經使用了切換的方法來隱藏/顯示

$(document).ready(function() { 
    $('li').click(function() { 
     $('a', this).toggle(); 
    }); 
});

見JS這裏提琴：https://jsfiddle.net/rf5up5fr/12/

來源

2016-02-02 02:37:01 StealthSpoder

嘗試此解決方案（包括jQuery的前面）

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 

<li><a class="menu" href="#" idmenu="doc1">Doc1</a></li> 
<li><a class="menu" href="#" idmenu="doc2">Doc2</a></li> 
<li><a class="menu" href="#" idmenu="doc3">Doc3</a></li> 

<div class="content" id="doc1" style="display:none">doc1</div> 
<div class="content" id="doc2" style="display:none">doc2</div> 
<div class="content" id="doc3" style="display:none">doc3</div> 


<javascript type='text/javascript'> 
$(document).ready(function() { 
    $(".menu").click(function() { 
     id = $(this).attr("idmenu"); 
     $(".content").hide(); 
     $("#"+id).show(); 
    }); 
}); 
</script>

測試：https://jsfiddle.net/Cuchu/cbtwndh6/

來源

2016-02-02 03:05:53 Cuchu

我試過這個，它的工作原理，謝謝。真的很容易理解 – cathy305

簡單的jQuery腳本的問題

回答

相關問題