رابط مرساة HTML مع عدم وجود التمرير أو القفز

Question

ولدي العديد من الروابط التي لديها كل معرف الفريدة التي هي "شبه المراسي". أريد لها أن تؤثر يتم التعامل مع كل قيمة التجزئة رابط والنقر السحر من قبل بعض الرموز موتولز. ومع ذلك، عند النقر على الروابط التي انتقل لأنفسهم (أو إلى الأعلى في حالة واحدة). أنا لا أريد أن انتقل في أي مكان، ولكن أيضا إلى بلدي جافا سكريبت لتنفيذ والحصول على قيمة التجزئة في التحديث رابط.

ومحاكاة نموذج التعليمات البرمجية:

<a href="#button1" id="button1">button 1</a>
<a href="#button2" id="button2">button 2</a>
<a href="#" id="reset">Home</a>

وحتى لو كنت على النقر على رابط "زر +1"، عنوان الموقع يمكن أن يكون HTTP: // example.com/foo.php#button1

هل لديها أي أفكار لهذا؟ مجرد وجود بعض الفراغ عودة جافا سكريبت يقتل في التمرير ولكن أيضا يقتل بلدي جافا سكريبت (على الرغم من أنني يمكن ربما كمحاولة للتغلب على ذلك مع عند _ النقر)، ولكن الأهم من ذلك، يمنع قيمة التجزئة في رابط للتغيير.

Answer 1

وأنا ربما هناك شيء ناقص، لكن لماذا لا مجرد منحهم هويات مختلفة؟

<a href="#button1" id="button-1">button 1</a>
<a href="#button2" id="button-2">button 2</a>
<a href="#" id="reset">Home</a>

وأو أيا اتفاقية كنت تفضل.

Answer 2

وبيت القصيد من وجود صلة مرساة هي للتمرير صفحة إلى نقطة معينة. حتى إذا كنت لا تريد أن يحدث ذلك، تحتاج إلى إرفاق معالج onclick وعودة كاذبة. حتى مجرد مضيفا أنها سمة يجب أن تعمل:

<a href="#button1" id="button1" onclick="return false">button 1</a>

جانب من تأثير ما سبق هو أن URL نفسه لن يتغير، منذ عودته كاذبة وإلغاء الحدث. لذلك منذ كنت تريد URL لتغيير الواقع، يمكنك تعيين متغير window.location.hash إلى القيمة التي تريدها (هذا هو الخاصية فقط من URL التي يمكنك تغيير دون متصفح إجبار إعادة تحميل). ربما يمكنك إرفاق معالج حدث وندعو شيء من هذا القبيل window.location.hash = this.id على الرغم من أنني لست متأكدا كيف موتولز يعالج الأحداث.

و(كما تحتاج كل من معرفات لتكون فريدة من نوعها)

Answer 3

ويمكنك استخدام رمز أدناه لتجنب التمرير:

<a href="javascript:void(0);">linktxt</a>

Answer 4

ولقد وجدت الحل. هنا I حفظ الموقع القديم عن الدعوة أ href واستعادته بعد التمرير

<script language="JavaScript" type="text/javascript">
<!--
function keepLocation(oldOffset) {
  if (window.pageYOffset!= null){
    st=oldOffset;
  }
  if (document.body.scrollWidth!= null){
    st=oldOffset;
  }
  setTimeout('window.scrollTo(0,st)',10);
}
//-->
</script>

ووفي الجسم من الصفحة

<a href="#tab1" onclick="keepLocation(window.pageYOffset);" >Item</a> 

sitepoint

Answer 5

وأيضا، preventDefault

    $(your-selector).click(function (event) {
        event.preventDefault();
        //rest of your code here
    }

Answer 6

وهناك طريقة أسهل من المحتمل أن يكون لإضافة على أنها GET. وهذا هو، http://example.com/foo.php?q=#button1 بدلا من http://example.com/foo.php#button1

وهذا لن يكون له أي تأثير على كيفية عرض الصفحة (إلا إذا كنت تريد أن)، ومعظم لغات البرمجة لديها بالفعل الأدوات في مكان بسهولة (وأمان) قراءة البيانات.

Answer 7

وحسنا نحن هنا 7 سنوات بعد أن نشر هذه الإجابة ولقد وجدت طريقة مختلفة والعمل على انجاحه: مجرد نقطة على window.location.hash إلى مرساة غير موجودة! أنها لا تعمل ل<a>s لكن يعمل تماما في <div>s.

<div onclick="window.location.hash = '#NonExistentAnchor';">button 1</div>

وعملت غرامة في الكروم 56، فايرفوكس 52 و الحافة (IE؟) 38. نقطة جيدة أخرى هي أن هذا لا ينتج أي أخطاء أو تحذيرات حدة.

ونأمل أن يساعد شخص غيري.