code - www w3schools com html5




رابط إلى عنصر داخل الصفحة الحالية (3)

لقد أنشأت صفحة HTML تحتوي على عدد من الجداول ذات الرؤوس مثل هذا: المحتوى والصفحة الرئيسية والوثيقة والنفقات وما إلى ذلك.

أريد إنشاء رابط لأعلى الصفحة. عند النقر فوق هذا الرابط ، يجب الانتقال إلى القسم المحدد. لذلك أنا استخدم الرمز أدناه لتعيين المحتوى. لكنها لا تعمل بالنسبة لي.

<a href="#Content">Content Section</a>

أعط العنصر الذي تريد "القفز" إلى معرف واضح ، مثل ذلك:

<p id="idOfTag">Your content goes here</p>

ثم في الرابط بأعلى الصفحة ، اجعله يشير إلى معرف ذلك العنصر (ضع في اعتبارك # ):

<a href="#idOfTag">Jump</a>

مثال كامل مع روابط متعددة:

<ul>
  <li><a href="#contentParagraph">Content</a></li>
  <li><a href="#mainPageParagraph">Main page</a></li>
  <li><a href="#documentParagraph">Document</a></li>
  <li><a href="#expensesParagraph">Expenses</a></li>
</ul>
<p id="contentParagraph">
  <h4>Content</h4>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p id="mainPageParagraph">
  <h4>Main page</h4>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p id="documentParagraph">
  <h4>Document</h4>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p id="expensesParagraph">
  <h4>Expenses</h4>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>


تحتاج إلى إنشاء مرساة للرابط. الطريقة الحديثة للقيام بذلك هي إعطاء العنصر المناسب سمة id="Content" . كانت الطريقة الأقدم للقيام بذلك هي استخدام <a name="Content"></a> .


يمكنك استخدام سمة name لعلامة anchor الخاصة بك لتحقيق ذلك.

دعنا نقول أن لديك div مع content معرف

<div id="content">This is my div</div>

بعد ذلك ، تأكد من حصولك على علامة anchor مع name سمة نفس id content div

<a href="#" name="content">Click to go to the top</a>

عرض حي.

انتقل لأسفل لرؤية الرابط

نهج آخر للقيام بذلك سيكون

<div id="content">My div</div>

ثم يجب أن يكون href الخاص بعلامة مرساة #content

<a href="#content">Click to go to top</a>

عرض حي.





html5