إخفاء عنوان الرابط أسفل صفحة الويب

لا يمكن إخفاء الاقتراح الذي يظهر اسفل الشاشة عند الإشارة إلى رابط معين باستخدام CSS.

ولكن يمكنك فعل ذلك باستخدام JS بعدم وضع href للعنصر a أو جعلها مساوية للـ #

href = '#'

وإضافة وظيفة onClick  للعنصر a الخاص بك تقوم بعملية الانتقال إلى الجزء الذي تريده من الصفحة.

<a href="#" onclick="window.location.href='#someWher'">رابطي</a>
<!-- أو يمكنك استخدام الشكل التالي -->
<a href="#" style="cursor: pointer" onclick="window.location.href='#someWher'">رابطي</a>

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

يمكن استعمال طريقة المكون button بشكل مماثل لطريقة التعامل مع المكون a بالشكل التالي:

<button onclick="window.location.href='Your Link here'">Something</button>

طبعاً يفضل أن يحمل الزر اسم يدل على المكان الذي سيذهب إليه، أيضاً من أجل تجربة مستخدم أفضل.

يمكنك استخدام أي عنصر HTML لتحقيق عملية فتح الصفحات بدون ظهور رابط الويب في الجزء السفلي من الصفحة لأنه مقتصر على استخدام الوسم a و الخاصية href منه.

بذلك يمكنك استعمال الوسم p مثلاً ونستخدم جافاسكربت في عملية فتح الروابط بالدالة window.open

<p onclick="window.open('https://academy.hsoub.com/')"> Hsoub Academy</p>

مثال آخر على استخدما الأزرار 

<button onclick="window.open('https://academy.hsoub.com/')">Hsoub Academy</button>

يمكن استخدام أي عنصر آخر بنفس الطريقة

لإخفاء الرابط نحتاج javascript وليس css. يمكن تحقيق هذا الهدف بطريقين وكما يلي شرحه:

أولاً: التحكم في قيمة href على العنصر a. يمكن القيام بذلك بقطعة كود تستهدف جميع العناصر المطلوبة طبقاً لهويتها أو نوعها. سنقوم بالمثال التالي بتحديد جميع عناصر a التي لا نريد إظهار روابطها للمستخدم من خلال حصرها بصنف css واحد وليكن no-link.  سنستخدم أيضاً events مثل mouseover و mouseleave و click. فيما يلي مثال:

	...
	<--HTML CODE -->
	<div class="section">
	   <a href="www.link-will-not-be-targeted.com">Link appears</a>
	   <a class="no-link custom-link" href="https://www.example.com">Example Link</a>
	   <a class="no-link custom-link" href="https://www.google.com">google Link</a>
	</div>
	...
	 
	<script>
	    document.addEventListener("mouseover", function(event){ // رصد حركة الماوس عبر العناصر
	        let element= event.target //  تعيين العنصر الذي يتحرك الماوس عبره
	        if(element.classList.value.split(" ").find(x=> x==="no-link")){ 
            // نستهدف العنصر فقط إذا كان من النوع الذي سبق تعيينه وذلك بفحص قائمة الأصناف المسندة الى العنصر 
	            let link= element.attributes.href.value // الإحتفاظ بنسخة من الرابط الأصلي  
	            function click (){ // تعريف دالة فتح الرابط عن طريق جافاسكربت      
	                    window.open(link)
	            }
	            function leave (){ // تعريف دالة تقوم بإعادة تعيين الرابط الأصلي على العنصر بعد أن يتحرك الماوس بعيداً عنه              
	                    element.setAttribute("href", link)
	            }
	            if (link.toLowerCase().indexOf("#") >= 0) { // إذا كانت قيمة الرابط هي "# hash" لا نجري تغيير لإنتفاء الحاجة
	                console.log("link is already not active")
	            } else {
	                element.removeAttribute("href") // نزيل الرابط من العنصر فلا يظهر في status bar
	                element.addEventListener('mouseleave', leave) // ربط تحرك الماوس خارج العنصر بالدالة مسبقة التعريف أعلاه
	                element.addEventListener('click', click)  ربط إجراء النقر على الرابط بالدالة ذات العلاقة أعلاه        
	            }
	        }
	    })
	</script>
	...
	

ثانياً: التحكم ب status bar عن طريق window.status لكن هذا الخيار ربما لم يعد متاحاً في عدد من المتصفحات browsers. وهنا لا ينصح به حلاً لأن خاصية window.status باتت deprecated بمعنى لم تعد مدعومة.