سؤال

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

يمكنني استخدام عنصر آخر مثل مدى الخشنة، ولكن لدي فضول لمعرفة ما إذا كان هناك حل لسؤالي.

رابط المثال المستخدم:

<a class="share-this" href="#">Share This</a>
هل كانت مفيدة؟

المحلول

أو قد تساعد هذه الوظيفة أيضًا:

$('.share-this').toggleClass('some-class-that-is-toggled').click(function(e) {
    return false;
});

نصائح أخرى

عندما تنقر على الرابط، فإنه ينتقل إلى الرقم "#" المحدد في href، وهو ما يأخذ شاشتك إلى الأعلى.

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

يمكنك منع إجراء النقر الافتراضي كما يلي:

$('.share-this').toggleClass('some-class-that-is-toggled').click(function(e) {
    e.preventDefault();
});

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

الحل -->

<a class="share-this" href="javascript:void(0);">Share This</a> 

يحدث هذا بسبب HREF = "#" استخدم "JavaScript: void (0) ؛" بدلاً من #.

كما أنه يغير عنوان URL الخاص بك على سبيل المثال.

http://localhost:8080/appname ل http://localhost:8080/appname#

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top