大樹tree
大樹tree

未命名

<section id="mainArticle"><div class="sec-inner"><p class="mainTitle">HTML程式碼|同一頁面跳轉教學</p> <div class="subTitle"><div><a href="/@marinaaacom" class="link-sub author">艾娜旅途</a> <span>2021/07/16</span></div> <div class="wrap-funcMenu"><a><i class="icon-flag"></i></a> <a class="shareTarget"><span id="share_1" class="icon-share-2" style="display:;"></span> <span id="share_fill_1" class="icon-share-2-fill" style="display:none;"></span></a> <a><i class="icon-bookmark"></i> <!----></a> <a><i class="icon-heart"></i> <!----></a> <div class="wrap-shareLink"><div class="tri"></div> <div class="wrap-inner"><button id="tooltip-target-1" type="button" class="btn btn-secondary"><i class="icon-FB"></i></button> <!----> <button id="tooltip-target-2" type="button" class="btn btn-secondary"><i class="icon-line"></i></button> <!----> <button id="tooltip-target-3" type="button" class="btn btn-secondary"><i class="icon-link-2"></i></button> <!----></div></div></div></div> <div class="kv"><picture><source srcset="https://img.wreadit.com/member/175/blogId/marinaaacom/303120/article_cover/303120-8e6e028b8c5eb730a96c46628e689b36.webp" type="image/webp"> <source srcset="https://img.wreadit.com/member/175/blogId/marinaaacom/303120/article_cover/303120-8e6e028b8c5eb730a96c46628e689b36.jpg" type="image/jpeg"> <img alt="HTML程式碼|同一頁面跳轉教學" data-src="https://img.wreadit.com/member/175/blogId/marinaaacom/303120/article_cover/303120-8e6e028b8c5eb730a96c46628e689b36.jpg" src="https://img.wreadit.com/member/175/blogId/marinaaacom/303120/article_cover/303120-8e6e028b8c5eb730a96c46628e689b36.jpg" lazy="loaded"></picture></div> <article class="article-main wrap-mainContent"><div class="mainContent Zi_ad_ar_iR"><div class="entry-content">
		
<p class="has-normal-font-size">不知道是我理解力比較差還是怎樣,在網路上找到很多教程都看不太懂研究很久,因此終於研究成功的我決定來寫一篇我認為應該很好理解的教程,希望可以幫助到跟我一樣的人。</p><p style="text-align: center; width: 100%; margin: 10px auto; display: inline-block;"><div id="div-gpt-ad-1553167390264-0" style="text-align: center;"><div id="google_ads_iframe_/21697024903/BT_ar_iR_Pa_0__container__" style="border: 0pt none; width: 730px; height: 0px;"></div></div></p>



<p class="has-normal-font-size"><strong><span class="has-inline-color has-vivid-cyan-blue-color">同一頁面跳轉</span></strong><br>頁面跳轉的兩個組成部分為&nbsp;<strong>「<span class="has-inline-color has-vivid-red-color">指定位置</span>」</strong>&nbsp;和<strong>「<span class="has-inline-color has-vivid-purple-color">連結</span>」</strong>。<br>只要訪客點擊<span class="has-inline-color has-vivid-purple-color"><strong>連結</strong></span>,對方就會前往同一頁面的<span class="has-inline-color has-vivid-red-color"><strong>指定位置</strong></span>,可以用在製作文章目錄或較長的一頁式網站中,這裡要教的是如何更改HTML來達到目的。</p>



<p class="has-normal-font-size">操作非常簡單,只要把程式碼加入指定位置前後,這個位置是照片或文字都可以,程式碼如下</p>



<p class="has-background has-normal-font-size" style="background-color:#f7faff">&lt;p id=”<span style="color:#2caa71" class="has-inline-color">aaaaa</span>“&gt;<span class="has-inline-color has-vivid-red-color">指定位置</span>&lt;/p&gt;</p>



<p class="has-normal-font-size"><span class="has-inline-color has-vivid-red-color">指定位置</span>:你想跳至的地方<br><span style="color:#2caa71" class="has-inline-color">aaaaa</span>:製作連結會使用到的ID,你可以隨便設定長度也隨意,但這個ID須為英文小寫</p>



<h5><strong>實際操作示範|假設我想從1跳到2的地方</strong></h5>



<div class="wp-block-image"><figure class="aligncenter size-large"><picture><source srcset="https://img.wreadit.com/member/175/blogId/marinaaacom/303120/article_crawler/303120-d251321492361c23a14eb8c742d1d517.webp" type="image/webp"><source srcset="https://img.wreadit.com/member/175/blogId/marinaaacom/303120/article_crawler/303120-d251321492361c23a14eb8c742d1d517.jpg" type="image/jpeg"><picture><source srcset="https://img.wreadit.com/member/175/blogId/marinaaacom/303120/article_crawler/303120-b8ec6308fff44b032f36d226088f45f0.webp" type="image/webp"><source srcset="https://img.wreadit.com/member/175/blogId/marinaaacom/303120/article_crawler/303120-b8ec6308fff44b032f36d226088f45f0.jpg" type="image/jpeg"><img loading="lazy" width="664" height="472" src="https://img.wreadit.com/member/175/blogId/marinaaacom/303120/article_crawler/303120-b8ec6308fff44b032f36d226088f45f0.jpg" alt="" class="wp-image-5430" sizes="(max-width: 664px) 100vw, 664px"></picture></picture></figure></div>



<h5>STEP1|到程式碼的位置,在想要跳到的位置加入程式碼</h5>



<div class="wp-block-image"><figure class="aligncenter size-large"><picture><source srcset="https://img.wreadit.com/member/175/blogId/marinaaacom/303120/article_crawler/303120-98d223b5a8b9f9a350bb3e1729dd10ba.webp" type="image/webp"><source srcset="https://img.wreadit.com/member/175/blogId/marinaaacom/303120/article_crawler/303120-98d223b5a8b9f9a350bb3e1729dd10ba.jpg" type="image/jpeg"><picture><source srcset="https://img.wreadit.com/member/175/blogId/marinaaacom/303120/article_crawler/303120-4645ac9165de4820c676787484cc7513.webp" type="image/webp"><source srcset="https://img.wreadit.com/member/175/blogId/marinaaacom/303120/article_crawler/303120-4645ac9165de4820c676787484cc7513.jpg" type="image/jpeg"><img loading="lazy" width="672" height="476" src="https://img.wreadit.com/member/175/blogId/marinaaacom/303120/article_crawler/303120-4645ac9165de4820c676787484cc7513.jpg" alt="" class="wp-image-5428" sizes="(max-width: 672px) 100vw, 672px"><p style="text-align: center; width: 100%; margin: 10px auto; display: inline-block;"><div id="div-gpt-ad-1553167620196-0" style="text-align: center;"><div id="google_ads_iframe_/21697024903/BT_ar_iR_Pm_0__container__" style="border: 0pt none; width: 468px; height: 0px;"></div></div></p></picture></picture></figure></div>



<h5>STEP2|製作點擊鈕連結,在ID前加#</h5>



<div class="wp-block-image"><figure class="aligncenter size-large"><picture><source srcset="https://img.wreadit.com/member/175/blogId/marinaaacom/303120/article_crawler/303120-ce38766164b7ccbf9bfc901fc8691ffb.webp" type="image/webp"><source srcset="https://img.wreadit.com/member/175/blogId/marinaaacom/303120/article_crawler/303120-ce38766164b7ccbf9bfc901fc8691ffb.jpg" type="image/jpeg"><picture><source srcset="https://img.wreadit.com/member/175/blogId/marinaaacom/303120/article_crawler/303120-47a3bf8828e6a51a2ffae42853e21e94.webp" type="image/webp"><source srcset="https://img.wreadit.com/member/175/blogId/marinaaacom/303120/article_crawler/303120-47a3bf8828e6a51a2ffae42853e21e94.jpg" type="image/jpeg"><img loading="lazy" width="664" height="466" src="https://img.wreadit.com/member/175/blogId/marinaaacom/303120/article_crawler/303120-47a3bf8828e6a51a2ffae42853e21e94.jpg" alt="" class="wp-image-5429" sizes="(max-width: 664px) 100vw, 664px"></picture></picture></figure></div>



<p class="has-normal-font-size">就是這麼簡單就可以完成摟~</p>
<figure class="likecoin-embed likecoin-button"></figure>
<div id="jp-relatedposts" class="jp-relatedposts">
	
</div>
<div class="addtoany_share_save_container addtoany_content addtoany_content_bottom"><div class="a2a_kit a2a_kit_size_30 addtoany_list" data-a2a-url="https://marinaaa.com/html/" data-a2a-title="HTML程式碼|同一頁面跳轉教學">
<a class="a2a_button_facebook" href="https://www.addtoany.com/add_to/facebook?linkurl=https://marinaaa.com/html/&amp;linkname=HTML%E7%A8%8B%E5%BC%8F%E7%A2%BC%EF%BD%9C%E5%90%8C%E4%B8%80%E9%A0%81%E9%9D%A2%E8%B7%B3%E8%BD%89%E6%95%99%E5%AD%B8" title="Facebook" rel="nofollow" target="_blank"></a><a class="a2a_button_facebook_messenger" href="https://www.addtoany.com/add_to/facebook_messenger?linkurl=https://marinaaa.com/html/&amp;linkname=HTML%E7%A8%8B%E5%BC%8F%E7%A2%BC%EF%BD%9C%E5%90%8C%E4%B8%80%E9%A0%81%E9%9D%A2%E8%B7%B3%E8%BD%89%E6%95%99%E5%AD%B8" title="Facebook Messenger" rel="nofollow" target="_blank"></a><a class="a2a_button_line" href="https://www.addtoany.com/add_to/line?linkurl=https://marinaaa.com/html/&amp;linkname=HTML%E7%A8%8B%E5%BC%8F%E7%A2%BC%EF%BD%9C%E5%90%8C%E4%B8%80%E9%A0%81%E9%9D%A2%E8%B7%B3%E8%BD%89%E6%95%99%E5%AD%B8" title="Line" rel="nofollow" target="_blank"></a><a class="a2a_button_wechat" href="https://www.addtoany.com/add_to/wechat?linkurl=https://marinaaa.com/html/&amp;linkname=HTML%E7%A8%8B%E5%BC%8F%E7%A2%BC%EF%BD%9C%E5%90%8C%E4%B8%80%E9%A0%81%E9%9D%A2%E8%B7%B3%E8%BD%89%E6%95%99%E5%AD%B8" title="WeChat" rel="nofollow" target="_blank"></a><a class="a2a_button_email" href="https://www.addtoany.com/add_to/email?linkurl=https://marinaaa.com/html/&amp;linkname=HTML%E7%A8%8B%E5%BC%8F%E7%A2%BC%EF%BD%9C%E5%90%8C%E4%B8%80%E9%A0%81%E9%9D%A2%E8%B7%B3%E8%BD%89%E6%95%99%E5%AD%B8" title="Email" rel="nofollow" target="_blank"></a><a class="a2a_button_twitter" href="https://www.addtoany.com/add_to/twitter?linkurl=https://marinaaa.com/html/&amp;linkname=HTML%E7%A8%8B%E5%BC%8F%E7%A2%BC%EF%BD%9C%E5%90%8C%E4%B8%80%E9%A0%81%E9%9D%A2%E8%B7%B3%E8%BD%89%E6%95%99%E5%AD%B8" title="Twitter" rel="nofollow" target="_blank"></a><a class="a2a_button_sina_weibo" href="https://www.addtoany.com/add_to/sina_weibo?linkurl=https://marinaaa.com/html/&amp;linkname=HTML%E7%A8%8B%E5%BC%8F%E7%A2%BC%EF%BD%9C%E5%90%8C%E4%B8%80%E9%A0%81%E9%9D%A2%E8%B7%B3%E8%BD%89%E6%95%99%E5%AD%B8" title="Sina Weibo" rel="nofollow" target="_blank"></a><a class="a2a_button_google_gmail" href="https://www.addtoany.com/add_to/google_gmail?linkurl=https://marinaaa.com/html/&amp;linkname=HTML%E7%A8%8B%E5%BC%8F%E7%A2%BC%EF%BD%9C%E5%90%8C%E4%B8%80%E9%A0%81%E9%9D%A2%E8%B7%B3%E8%BD%89%E6%95%99%E5%AD%B8" title="Gmail" rel="nofollow" target="_blank"></a>
</div></div>
			</div><p style="text-align: center; width: 100%; margin: 10px auto; display: inline-block;"><div id="div-gpt-ad-1553167468608-0" style="text-align: center;"><div id="google_ads_iframe_/21697024903/BT_ar_iR_Pb_0__container__" style="border: 0pt none; width: 730px; height: 0px;"></div></div></p></div></article> <div class="wrap-footer"><div class="provide">
            本文由<a href="/@marinaaacom" class="link-sub author">艾娜旅途</a><span style="display:;">提供</span><a href="https://marinaaa.com/html/" target="_blank" class="link-sub source" style="display:;">原文連結</a></div> <div class="wrap-funcMenu"><a><span class="icon-flag"></span></a> <a class="shareTarget"><span id="share_2" class="icon-share-2" style="display:;"></span> <span id="share_2" class="icon-share-2-fill" style="display:none;"></span></a> <a><i class="icon-bookmark"></i> <!----></a> <a><i class="icon-heart"></i> <!----></a> <div class="wrap-shareLink"><div class="tri"></div> <div class="wrap-inner"><button id="tooltip-target-b-1" type="button" class="btn btn-secondary"><i class="icon-FB"></i></button> <!----> <button id="tooltip-target-b-2" type="button" class="btn btn-secondary"><i class="icon-line"></i></button> <!----> <button id="tooltip-target-b-3" type="button" class="btn btn-secondary"><i class="icon-link-2"></i></button> <!----></div></div></div> <div class="wrap-label"><a href="/search?keyword=%23%E7%A8%8B%E5%BA%8F%E4%BB%A3%E7%A2%BC">程序代碼</a><a href="/search?keyword=%23%E6%95%99%E7%A8%8B">教程</a><a href="/search?keyword=%23%E7%9A%84%E5%9C%B0%E6%96%B9">的地方</a><a href="/search?keyword=%23%E9%A0%81%E9%9D%A2">頁面</a><a href="/search?keyword=%23%E8%A3%BD%E4%BD%9C">製作</a></div></div> <div class="wrap-author"><div><a href="/@marinaaacom" class="link-main authorName">艾娜旅途</a> <p class="authorDescript"> 艾娜旅途 </p></div> <a href="/@marinaaacom" class="authorImg" style="background-image:url(https://admin.wreadit.com/assets/images/creator_images/creator_08.jpg);"></a></div> <div class="wrap-nextArticle show"><div class="wrap-btnArticle"><a href="/@marinaaacom/post/310832" class="wrap-inner"><div class="arrow"><i class="icon-chevron-left"></i></div> <div class="wrap-box"><div class="step">上一篇</div> <div class="mainText">零失敗甜點|酥皮蝴蝶餅在家自己做</div></div></a></div> <div class="wrap-btnArticle"><a href="/@marinaaacom/post/302391" class="wrap-inner"><div class="wrap-box"><div class="step">下一篇</div> <div class="mainText">澳洲打工度假|錢被提款機吃了怎麼辦?</div></div> <div class="arrow"><i class="icon-chevron-right"></i></div></a></div></div></div></section>
CC BY-NC-ND 2.0 版权声明

喜欢我的文章吗?
别忘了给点支持与赞赏,让我知道创作的路上有你陪伴。

加载中…

发布评论