ساخت لینک برای یک متن در javascpt
برای اینکه مثلا یک تگ مشخص رو با کلیک بر روی اون در صفحه ای جدید لینکی باز کند باید چیکار کنیم ؟
یعنی مثلا من روی دکمه ی Larg کلیک میکنم و میخوام در صفحه ی جدید باز بشه .
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
خب این فایل های ساده ی ما هست
من یدونه صفحه ی صفحه ی ایندکس و دوتا لینک جداگانه که به فایل ها لینک 1 و 2 اشاره دارن ساختم
این ایندکس بدون هیچ کاری
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>باز کردن لینک در صفحه ی جدید</title>
</head>
<body>
<a href="link1.html">
<p>لینک اول</p>
</a><a href="link2.html">
<p>لینک دوم</p>
</a>
</body>
<script>
</script>
</html>این هم مثلا لینک 1
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>لینک اول</title>
</head>
<body>
<h1>سلام من لینک اول هستم</h1>
</body>
</html>خب تا اینجا ما هیچ کار عجیبی نکردیم
ولی اگه این کلاس رو به لینک ها اضافه کنیم OpenInNewTab
که اینجوری میشه
<a href="link1.html" class="OpenInNewTab">
<p>لینک اول</p>
</a><a href="link2.html" class="OpenInNewTab">
<p>لینک دوم</p>
</a>حالا هم این کد جاوا اسکریپت رو اضافه می کنیم
const OpenInNewTabLinks = document.getElementsByClassName('OpenInNewTab');
for (let i = 0; i < OpenInNewTabLinks.length; i++) {
OpenInNewTabLinks[i].target = '_blank';
}حالا اگه صفحه ی ایندکس رو باز کنی لینک هایی که کلاس OpenInNewTab رو دارن در صفحه ی جدید باز میشن حالا بیا کد جاوا اسکریپت رو تشریح کنیم
const OpenInNewTabLinks = document.getElementsByClassName('OpenInNewTab');اینجا ما از طریق DOM جاوااسکریپت تمام المنت هایی رو که کلاس OpenInNewTab دارن رو سلکت کردیم این رو هم باید بدونیم که خروجی این کد یک آرایه هست که هر اندیسش یکی از المنت های ماست
for (let i = 0; i < OpenInNewTabLinks.length; i++) {
OpenInNewTabLinks[i].target = '_blank';
}اینجا چون ما یک آرایه داشتیم یدونه حلقه زدیم دورش که به تعداد اندیس های ارایه تکرار میشه
و توی هر تکرار اتربیوت target اون تگ a رو با _blank برابر کردیم که موجب میشه لینک توی یک صفحه ی جدید باز بشه
تمام😊
خب باید اول اون هایی رو که می خوای سلکت کنه مثلا هر کدوم کلاس OpenInNewTab رو داشتن باشن رو با جاوااسکریپت انتخاب کنی و اتریبیوت target رو با _blank برابر کنی
@Nima.nori
این قدر هم ساده نیست .
من بک اند کارم و هیچ از فرانت نمیدونم.
من میخوام متنه تگ p داشته باشه .
نفهمیدم منظورت رو آیا اصلا با DOM جاوا اسکریپت کار کردی ؟
اگه اره که یه ذره کد رو بیشتر الگوریتمیک توضیح بدم اگه هم نه کد رو قرار بدم
خب این فایل های ساده ی ما هست
من یدونه صفحه ی صفحه ی ایندکس و دوتا لینک جداگانه که به فایل ها لینک 1 و 2 اشاره دارن ساختم
این ایندکس بدون هیچ کاری
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>باز کردن لینک در صفحه ی جدید</title>
</head>
<body>
<a href="link1.html">
<p>لینک اول</p>
</a><a href="link2.html">
<p>لینک دوم</p>
</a>
</body>
<script>
</script>
</html>این هم مثلا لینک 1
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>لینک اول</title>
</head>
<body>
<h1>سلام من لینک اول هستم</h1>
</body>
</html>خب تا اینجا ما هیچ کار عجیبی نکردیم
ولی اگه این کلاس رو به لینک ها اضافه کنیم OpenInNewTab
که اینجوری میشه
<a href="link1.html" class="OpenInNewTab">
<p>لینک اول</p>
</a><a href="link2.html" class="OpenInNewTab">
<p>لینک دوم</p>
</a>حالا هم این کد جاوا اسکریپت رو اضافه می کنیم
const OpenInNewTabLinks = document.getElementsByClassName('OpenInNewTab');
for (let i = 0; i < OpenInNewTabLinks.length; i++) {
OpenInNewTabLinks[i].target = '_blank';
}حالا اگه صفحه ی ایندکس رو باز کنی لینک هایی که کلاس OpenInNewTab رو دارن در صفحه ی جدید باز میشن حالا بیا کد جاوا اسکریپت رو تشریح کنیم
const OpenInNewTabLinks = document.getElementsByClassName('OpenInNewTab');اینجا ما از طریق DOM جاوااسکریپت تمام المنت هایی رو که کلاس OpenInNewTab دارن رو سلکت کردیم این رو هم باید بدونیم که خروجی این کد یک آرایه هست که هر اندیسش یکی از المنت های ماست
for (let i = 0; i < OpenInNewTabLinks.length; i++) {
OpenInNewTabLinks[i].target = '_blank';
}اینجا چون ما یک آرایه داشتیم یدونه حلقه زدیم دورش که به تعداد اندیس های ارایه تکرار میشه
و توی هر تکرار اتربیوت target اون تگ a رو با _blank برابر کردیم که موجب میشه لینک توی یک صفحه ی جدید باز بشه
تمام😊