讓我們先來看看完成的結果
這一堂課會學到的語法包含：
hide( ) / show( ) / toggle ( )
建立閱覽畫面
首先，我們利用div這個HTML標籤，來建立一個如同下圖的網頁。div的意思是division，也就是區塊的意思。
接下來我們想在不同的區塊內，輸入不同的內容，我找了一篇我喜歡的何權峰醫師所寫的文章（原文轉自：天下雜誌）。
等等就要學著在上方的區塊中，分別建立「顯示」、「隱藏」和「切換」這三個之後會使用到的功能列；下方的區塊則放入剛剛我所找的文章。
上方區塊文字建立
一種寫法是直接將我們想要的格式（style）寫在區塊（div）中，如下圖：
另一種寫法是建立id的方式，先把id建立好，接著只要在div的地方引入id就可以了（id的建立方式是使用#，還記得嗎？），如下圖：
下方區塊文字建立
下方的區塊，我們就貼入在網路上找到的文章，貼上文章後，記得要用先前所提的 br 或 p 來整理一下文章的段落。這兩個和前面提的 div 一樣，都是HTML標籤。其中， br 是換行的意思
接著， p 則是段落的意思。也就是說，如果你想要在同一段落<p>裡面，換行的話，就會需要用到<br>。
另外一提的是，大部分的HTML標籤都會有一個開頭，和一個結束，像<p>就是表示段落開始，最後的</p>則表示段落結束。但是<br>比較特別，它就是一個單純的換行符號，所以不需要開頭或結束，在想換行的地方放上去就是了。
我們一樣要用id的方式建立內文的格式，建立好的格式如下圖：
建立假超連結
建立好文字後，我們要讓上方區塊的文字有功能，但又不是要真的進行超連結，這時候，就要來寫假的超連結，寫法就是讓超連結的網址，連到的是「#」：
在style的地方，我們同樣也可以做一些調整，來更改文字的顏色，還有各種不同功能情況下的文字型態，像是文字原本的樣子（link）、拜訪過（visited）、滑鼠移過（hover）、滑鼠按下（active）：
利用jQuery讓內文根據指令改變
接下來我們就要利用jQuery來讓內文根據上面的指令動作。
一樣要先完成我們的起手勢，上面那一行是引入jQuery，下面那行是jQuery的基本語法：
第二步，記得上一堂課中我們提到，要先讓HTML裡面的元素都讀取完之後再來進行元素的操作嗎？所以我們同樣需要 $(document).ready(function( ){ } ) 這段作為開頭。
接著要轉換一下，先把每個按鍵加上id
再來就要在jQuery中，根據不同的id做不同的動作，我們使用到的是隱藏（hide）、顯示（show）、切換（toggle）這三種語法（參考jQuery API）。
還記得我們上一堂課有提到，jQuery的基本用法是 $( ).( )，第一個括號裡放的是對象，句點後放的是動作，第二個括號內裡放的是設定。
所以這裡我可以先寫 $("#a1").click(function( ){ }) 意思是，當我#a1被點擊的時候，要做什麼...。
在function( ){ }我們就可以放要做什麼的內容，因為我希望當#a1被點擊的時候，我們的內容（#content）可以隱藏起來，所以就寫 $("#content").hide() 如果沒有特別的設定，hide後面的括號內就可以不用放任何東西。
其他的部分以此類推，完成後的語法如下，點a1的按鍵時隱藏內容；a2時顯示內容；a3時切換內容：
我還做了一些簡單的排版，看看完成的結果吧！
程式範例
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>閱覽頁面</title>
<style>
#menu{font-weight:bold; font-family:微軟正黑體; text-align:center; font-size:20px}
#content{width:50%; margin:auto; line-height:20px}
a:link{text-decoration:none; color:black}/*原本的樣子*/
a:visited{color:purple}/*拜訪過的樣子*/
a:hover{color:purple}/*滑鼠移過*/
a:active{text-decoration:underline}/*滑鼠按下時*/
</style>
<script src="jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
$("#a1").click(function(){
$("#content").hide()
})
$("#a2").click(function(){
$("#content").show()
})
$("#a3").click(function(){
$("#content").toggle()
})
})
</script>
</head>
<body>
<h1 style="font-size:24px; font-family:微軟正黑體; text-align:center">很多時候事情就是這麼簡單，一次只做一件事</h1>
<h2 style="width:50%; margin:auto; font-size:12px; font-family:微軟正黑體; text-align:right; color:gray">作者：何權峰，文章引用自：<a href="http://www.cw.com.tw/article/article.action?id=5065263" target=_blank>天下雜誌</a></h2>
<div>
<div id="menu">
<a id="a1" href="#">隱藏</a>
<a id="a2" href="#">顯示</a>
<a id="a3" href="#">切換</a></div>
<div id="content">
<p>你是否覺得自己就如雜要的演員那般，終日勞碌不停？比如邊看電視、邊聊天，同時在滑手機？一邊說電話，同時整理手上郵件，並且把晚餐放進微波爐？
<br>
是否老是神魂遊走，魂不守舍。常因為恍神而打破東西、灑翻水、東西丟三忘四。經常還沒嚐食物的滋味，就已經吞下肚？
<br>
是否總是在想：什麼事要做？接下來還要做什麼事？卻沒注意到，自己現在在做什麼？
</p>
<p>
要讓失焦的生活變專注，最簡單的生活方式就是──「一次只做一件事。」如果讀書，就專心讀書，如果睡覺，就好好睡覺……不要再去想別的事。
<br>
當身體在做一件事時，如果我們的心不在，身心沒有真正整合，往往顧此失彼。當那件事做完時，又會在下一刻想著上一刻有哪些事沒做好，連帶我們下一件事也受影響，結果沒一件事做好。
例如：今天我們花了好幾個鐘頭，擔心明天學校裡一場很重要的考試，就沒辦法專心念書。如果我們躺在床上整晚睡不著覺，煩惱那些沒讀懂或是沒念完的東西，到了明天考試我們一定精疲力竭，結果考試又沒考好。
</p>
<p>
我每天都要寫作，除了報紙與雜誌的固定專欄外，還有一些臨時加進來的稿約和回讀者信。比如我這星期必須寫完三篇，在第一天我就開始想，要寫哪三篇，想到最後，可能一篇都寫不出來，因為三篇的主題、對象不同。後來，我開始一次只思考一個主題，專心寫好了，再去想第二個主題。這樣不但能如期完成，也不再陷入莫名焦慮。
</p>
<p>
想像你參加比賽，必須將兩隻豬抱到一百公尺遠的地方，如果你先抱起一隻，接著又抱起另一隻，那就永遠沒完沒了，因為老是有一隻會從你的臂彎裡溜走。
</p>
<p>
托斯卡尼尼是舉世聞名的指揮家。人生的閱歷豐富，他到過很多地方，指揮過無數的樂團，也見過無數的達官顯要。
當他八十歲時，有一天兒子好奇地問他：「在您一生中，一定有過很多重大的事，您覺得自己做過最重要的事是什麼？」
托斯卡尼尼回答說：「我現在正在做的事，就是我一生中最重大的事，不管是在指揮一個交響樂團，或是在剝一顆橘子。」
<br>
他說得對，如果你無法專心地剝橘子，如果你只想儘快剝來吃的話，你還是無法專心地吃橘子。當你一邊吃著橘子，你還是會一邊想著下一刻要做什麼，對橘子的味道無法細細地品嚐，也失去吃的樂趣。如果你不能專注在此刻，那你任何時刻都不可能專注，你將永遠被下一件事拖著走。
</p>
<p>
你可以隨時用「此刻」這兩個字提醒自己，專注在現在所做的事，「此刻，我正在讀書……，此刻，我正在散步……，此刻，我正在睡覺……，此刻，我正在和朋友聊天……，此刻，我正在品嚐甜點……。」
</p>
<p>
記住，回到此刻，專注在每個當下所做的事，其他的都不重要。
很多時候事情就是這麼簡單，一次只做一件事。
當你全神貫注於手上的事，就不會想著下一步的計畫，或掛念剛才做得好不好；也不會耽擱或擔心還沒做的事，你就可以從繁雜的事物中解脫出來。
當你全然地投入當下所做的事情，結果自會完美呈現。</div>
</div>
</body>
</html>
以上內容均為本人在馬老師雲端研究室學習所整理之筆記
0 意見:
張貼留言