一、先首我們準備好HTML內容：
<!--巡覽列-->
<div id="navigation">
<div id="container">
<ul id="firstul">
<li id="home" class="active"><a href="#" title="Home">首頁</a></li>
<li id="news"><a href="#" title="讀書心得" id="mynews">讀書心得</a></li>
<li id="about"><a href="#" title="有關我" id="about_us">有關我</a></li>
</ul>
<div id="mypage" style="display: none" align="center">
</div>
</div>
</div>
<!-- 文章：預設只顯示標題 -->
<div id="content">
<span id="title01">數位式競爭--讀書心得</span><br>
<div id="title01_content" style="display: none;">
這本書為民國89年出版，已經在我書架上很多了年，是我讀大學時的教科書，老師花了一個學期就只上這本書，當時讀起來沒什麼感覺，頂多只是為了交報告而讀，但很奇怪，它就是一直在我的書架上，雖然十多年來，書架上的書已經換了好幾回，尤其是資訊類的書，換的速度之快連我都怕，不過一本好書一定有存在的價值，不會因為時間的變動而有任何改變。我每天可以說都在與技術文件為「舞」，只是不知是我看它跳還是它看我跳。就這樣有一天，不知為何，好像「它」在跟我招手，然後說，來看看我吧，離上次你讀我已經是九年多前的事了，我能給你一些「明牌」！古人說：「不經一事，不長一知。」你沒有經歷過的事，說再多感受就是有限。但九年後的今天重讀本書，真是感受良多，這本書應該是十年前版的「由A到A+」。我一直很佩服國外的研究學者，能花那麼多時間、精神來研究出原本為「隱性」的知識，讓想要更上一層樓的人可以有方法可循。看完這本書後，讓我心有戚戚，十多年前的故事，現在每天還是在不斷重覆發生，不管是成功的故事，還是失敗的故事。我想這可能是知識的傳遞、了解到最後的落實還有很大一段差距。如果你從事軟體相關產業，而還沒有看過這本書，我非常建議你買來看看（我不知道還買不買的到)。
</div>
<span id="title02">The Last Lecture -- 讀書心得</span><br>
<div id="title02_content" style="display: none;">
「最後的演講」，是一位父親留給孩子的遺言。沒錯，是遺言。聽起來是個不好的消息，但也因為是遺言，所以他必須認真思考要留下什麼給他的孩子們，他晚婚，他小孩都還小，他有成就，他患癌。最後的演講分為兩個部分，一是演講影片，二是書本。我是先看書再看影片，影片的部份，你可以搜尋「朱學恆」在他的部落格裡有影片檔和中文字幕，影片是免費的。這場演講為什麼會是全世界轟動？我想，除了是作者蘭迪．鮑許（Randy
Pausch）本身在面對癌症時還能散發不可思義的"樂觀"魅力，還有一種「人之將死，其言也善。」的人生智慧在裡面。人生有方向，是多麼重要及快樂的一件事，首先，是完成自我的夢想，然後是啟發他人的夢想，還可以進一步幫助他人完成夢想。這是Randy教授最後想跟我們說的話。反之，也就是人生一定要有「目標」、要有「方向」，要知道你自己的「路」在那裡。這或許是我喜歡讀些哲學類的書籍關係，思考一件的事的角度之多，或許不是你能想像的，提高看事的高度，提高做事的層度，努力的成就自己，但也不要忘了幫助別人，造成一個良性循環的社會。
</div>
<span id="title03">Word of Mouth Marketing--讀書心得</span><br>
<div id="title03_content" style="display: none;">
我的信箱中有許多的電子報，每天上班第一件事就開打開信箱，確認一下有沒有重要人士的信件，看看Log信件，看看電子報，其實訂了那怎多的電子報，絕大部份都在1-10秒內被我的食指結束生命，快快的按下那Delete鍵，然後Next。而某天的一封電子報裡刊載的標題讓我有興趣「掃」一下，看完後(很少有認真看完全部)，內容簡潔但又不失內容，後來又收到幾期的內容，一樣，都是很直接也實用的內容，文筆也不會看了想睡覺。這些電子報其實也是行銷手腕的一種，精選幾段精彩的內容，吸引你的注意，如果你也確實被吸引，但因為你只是看到部份的片面，這時就要看這些精彩的內容是否有足夠的吸引內，讓你採取行動，拿出新台幣去換一本有完整內容的書本。而我，被打動了。雖然我不是行銷人員，但我對行銷、管理方面的知識算很有興趣，一樣是動腦的工作，但行銷、管理和程式就是不同。而作者除了提供大量免費實用的做法外，也提供簡單的5個步驟打造好的「口碑」。
</div>
</div>
- 巡覽列：我們先使用ul及li元素配合CSS來做UI的工作。
- 文章：一開始只會顯示標題，使用者點選標題，才顯示文章內容。
二、巡覽列之CSS
/*ul元素設定*/
#navigation ul
{
list-style-type : none ;
margin : 0 auto; /*置中*/
padding : 0;
width : 850px;
}
/*讓li"浮"起來，變成"橫向列"*/
#navigation li
{
float : left ;
}
/*Menu中a元素設定*/
#navigation a
{
float : left ;
display : block ; /*以「區塊」元素方式顯示*/
color : rgb(197,197,197);
padding : 5px 8px;
margin-top : 10px;
border-bottom-width : 0;
}
/*li中類別為active的a元素設定*/
#navigation li.active a
{
color : rgb(255,204,0);
background-color : rgb(153,153,153);
}
/*Menu中a元素:hover及:active設定 */
#navigation a:hover, #navigation a:active
{
color : rgb(204,204,255);
background-color : rgb(100,90,125);
}
/*文章區塊，<div id="content">設定 */
#content
{
clear : both ;
width : 850px;
margin : 0 auto; /*置中*/
padding : 0;
background-color : rgb(193,189,204);
}
/* 文章標題，讓jQuery動態加入 */
.newstitle
{
color :Black ;
border-bottom : 1px dotted gray;
}
/* 文章內容，由jQuery動態控制 */
.newscontent
{
width : 50%;
color : Black ;
background-color : rgb(255,153,51);
border : 1px dotted gray;
padding : 7px 30px 10px 25px;
}
建議一段一段複製，看整個畫面變化的過程，才能了解為什麼這樣設定。
三、jQuery程式碼
再來就是jQuery來設定文章標題樣式及文章內容顯示部份：
$(function() {
$("#firstul li:eq(0)").removeClass("active"); //先將"首頁"的類別移除
$("#firstul li:eq(1)").addClass("active"); // 將"讀書心得"設定.active類別
$("span[id]").addClass("newstitle"); // 文章標題設定
$("#title01").click(function() { //點擊標題時，
//文章內容加入.newscontent類別設定
$("#title01_content").addClass("newscontent").toggle("slow");
//其他非title01的內容，全部hide()
$("div[id^=title]:not(#title01_content)").hide("slow");
});
$("#title02").click(function() {
$("#title02_content").addClass("newscontent").toggle("slow");
$("div[id^=title]:not(#title02_content)").hide("slow");
});
$("#title03").click(function() {
$("#title03_content").addClass("newscontent").toggle("slow");
$("div[id^=title]:not(#title03_content)").hide("slow");
});
});
這樣我們就完成了一個起簡單版的Menu巡覽列(CSS實作)加上切換文章內容功能(jQuery)的網頁。程式還有很多改進的空間，加油！
可惜,沒實作參考圖!!
回覆刪除