لینک دار کردن متن در جاوا اسکریپت
ممکن است بخواهید به صورت داینامیک و البته سمت کلاینت، متنی را داخل صفحه‌ی خود لینک دار کنید.
طرح یک مسئله
برای شروع، کد HTML زیر را در نظر بگیرید:
|
1 2 3 4 |
<input type="text" id="link" value="http://fullkade.com" /> <br> <input type="button" id="click" value="Change Link" onClick="setLink('address', document.getElementById('link').value);" /> <br> <span id="address"> fullkade </span> |
یک جعبه‌ی متن برای وارد کردن لینک دلخواه توسط کاربر و یک دکمه ایجاد کرده‌ایم! همچنین یک متن با عنوان fullkade در انتهای صفحه قرار داده‌ایم! و حالا قصد داریم وقتی روی دکمه کلیک شد، متن داخل span لینک دار شود.
بنابراین در رویداد onClick دکمه، تابع setLink را فراخوانی میکنیم. این تابع را در ادامه توضیح خواهیم داد.
تابع setLink
|
1 2 3 4 5 6 |
<script> function setLink(targetId,link) { var target = document.getElementById(targetId); target.innerHTML = "<a href=" + link + ">" + target.innerHTML + "</a>"; } </script> |
این تابع، با گرفتن دو ورودی، متن داخل یک المنت را لینک دار می‌کند!
- ورودی targetId: آیدی المنتی که قصد داریم متن آن را لینک دار کنیم.
- ورودی link: خود لینک
داخل تابع، ابتدا محتوای المنت هدف را با استفاده از آیدی آن گرفته و داخل متغیر target قرار می‌دهیم؛ سپس محتوای HTML داخل آن را به مقدار جدیدی تغییر می‌دهیم. تنها کافیست به اطراف مقدار قدیمی، تگ‌های لینک a را اضافه کنیم و سپس آن را در داخل target قرار دهیم.
کد نهایی
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<html> <head> <title>FullKade.Com</title> </head> <body> <input type="text" id="link" value="http://fullkade.com" /> <br> <input type="button" id="click" value="Change Link" onClick="setLink('address', document.getElementById('link').value);" /> <br> <span id="address"> fullkade </span> <script> function setLink(targetId,link) { var target = document.getElementById(targetId); target.innerHTML = "<a href=" + link + ">" + target.innerHTML + "</a>"; } </script> </body> </html> |
با سلام و تشکر بابت مطلب خوبتون
بنده مارکر و پاپ آپ ی دارم بر روی یک نقشه html
میخواستم با کدهای اسکریپت، یک از این دو را لینک دارم کنم. یعنی وقتی بر روی مارکر یا پاپ آپ کلیلک میکنیم به یک ادرس وب سایت هدایت شود.
لطفا بنده را راهنمایی فرمایید.
شما بهتره از کد جاوا اسکریپت برای باز کردن یک لینک استفاده کنینو چیزی رو لینک دار نکنین!