PDA

View Full Version : سوال: کمک در show/hidden یک بلاک (حل شد)


رضا قربانی
سه شنبه 02 خرداد 1391, 03:15 صبح
با سلام خدمت همگی دوستان


من قطعه کدی دارم که می خوام وقتی روی لینکی کلیک شد محتویاتی نشان داده بشه که این مجتویات با کلیک بر روی هر لینک متفاوته.

من یک لینک رو می تونم نمایش بده و مخفیش کنم اما بیش از یک لینک بشه کلا سیستمش قاطی میشه و همون اولی هی show / hidden میشه.

.

توجه داشته باشید مشخصات تگ <a href= ... من یکیه و نمیشه عوضش کرد چون در داخل حلقه php قرار میگیره
<a id="displayText" href="javascript:toggle();">show</a>

در کل اگر چیز دیگه ای غیر از این دارید واسه ما بذارید
ممنون میشم راهنماییمون کنید :

کد آماده و منظم و ساده :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>


</head>

<body>
<a id="displayText" href="javascript:toggle();">show</a> <== click Here
<div id="toggleText" style="display: none"><h1>1111111111111111111111111111</h1></div> <br />

<a id="displayText" href="javascript:toggle();">show2</a> <== click Here
<div id="toggleText" style="display: none"><h1>222222222222222222222222222</h1></div><br />

<a id="displayText" href="javascript:toggle();">show3</a> <== click Here
<div id="toggleText" style="display: none"><h1>33333333333333333333333333333333</h1></div>

</body>
</html>


پ ن : این جاوا اسکریپت هم واسه ما پاس شده ها
colors
سه شنبه 02 خرداد 1391, 07:28 صبح
درود

داش رضا ببین این میتونه کمکت کنه


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">

function Toggle(id) {
var a = document.getElementById(id);
if(a.style.display == 'block')
a.style.display = 'none';
else{
a.style.display = 'block';
}
}

</script>
</head>

<body>
<a class="displayText" onclick="Toggle('toggleText1')" href="#">show</a> <== click Here
<div id="toggleText1" style="display: none">
<h1>1111111111111111111111111111</h1>
</div>
<a class="displayText" onclick="Toggle('toggleText2')" href="#">show2</a> <== click Here
<div id="toggleText2" style="display: none">
<h1>2222222222222222222222222222</h1>
</div>
<a class="displayText" onclick="Toggle('toggleText3')" href="#">show3</a> <== click Here
<div id="toggleText3" style="display: none">
<h1>3333333333333333333333333333</h1>
</div>
</body>
</html>

واسه اون DIV ها باید ID یکتای به تابع Toggle بفرستی که روی رویداد onClick هر لینک مقدار دهی میشه
djsaeedkhan
سه شنبه 02 خرداد 1391, 09:01 صبح
سلام
اینو هم ببین
http://barnamenevis.org/showthread.php?323165-%DA%86%D9%86%D8%AF-%D8%B5%D9%81%D8%AD%D9%87-%D8%A7%DB%8C-%DA%A9%D8%B1%D8%AF%D9%86-%D8%A8%D8%B3%DB%8C%D8%A7%D8%B1-%D8%B3%D8%A7%D8%AF%D9%87-%DB%8C%D9%87-%D8%B5%D9%81%D8%AD%D9%87-%D8%A8%D9%84%D9%86%D8%AF
soroush.r70
سه شنبه 02 خرداد 1391, 09:38 صبح
رضا اینو ببین به کارت میاد.
رضا قربانی
سه شنبه 02 خرداد 1391, 12:19 عصر
colors (http://barnamenevis.org/member.php?181541-colors) جان . این مثال شما تک <a... که سه تاست ، هر تاش تغییر کرده . من گفتم که تگ <a ... داخل حلقه قرار میگیره و نباید سه تا لینک نا مشابه باشه. خب حالا مشکلی نیست . من میام و با تابع رندوم داخل حلقه یک مقداری بهش میدم و مشکلم حل میشه اما شاید من هزاران رکورد داشته باشم و وقتی برای نمایش کلیک می کنی onclick اسکرول مرورگر به اول صفحه ختم می شه و باید دوباره بچرخی و اون رکورد رو پیدا کنی که این مشکل بزرگی محسوب میشه . ممنون می شم اگه این مشکلش رو حل کنید. ؟

djsaeedkhan (http://barnamenevis.org/member.php?85555-djsaeedkhan) جان کد شما هم تقریبا مثل همونه .

soroush.r70 (http://barnamenevis.org/member.php?140736-soroush.r70) جالبه ولی نشد که نشد. این کجا و آن کجا .

:ناراحت:

پ ن : این تگ لینکی که سه یا چندین بار تکرار میشه نباید در در اون هیچ کاراکتر یا دستوری اضافه بشه .چون میره داخل حلقه while
Unique
سه شنبه 02 خرداد 1391, 13:43 عصر
این مثال شما تک <a... که سه تاست ، هر تاش تغییر کرده . من گفتم که تگ <a ... داخل حلقه قرار میگیره و نباید سه تا لینک نا مشابه باشه. خب حالا مشکلی نیست . من میام و با تابع رندوم داخل حلقه یک مقداری بهش میدم و مشکلم حل میشه اما شاید من هزاران رکورد داشته باشم و وقتی برای نمایش کلیک می کنی onclick اسکرول مرورگر به اول صفحه ختم می شه

من هم متوجه صحبت شما نمیشم ! کد ایشون درسته اما میتونه بهتر بشه :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">

function Toggle(id) {
var a = document.getElementById('toggleText' + id);
if(a.style.display == 'block')
a.style.display = 'none';
else{
a.style.display = 'block';
}
}

</script>
</head>

<body>
<?php
foreach($rows as $row){
echo "<a class='displayText' onclick='Toggle($row['id'])' href='#'>show</a>";
echo "<div id='toggleText".$row['id']."' style='display: none'>".$row['text']."</div>";
}
?>
</body>
</html>

این کد کاری که شما میخواین را انجام میده !
کد شما کلا غلطه چون سه تا div یک id دارند !
colors
سه شنبه 02 خرداد 1391, 14:21 عصر
بله منم زیاد متوجه نشدم که چی گفتین! ولی این ویرایش دوستمون Unique (http://barnamenevis.org/member.php?11933-Unique) درسته و تو حلقه while هم میشه استفاده کرد‍‍!!
رضا قربانی
سه شنبه 02 خرداد 1391, 20:14 عصر
ببینید دوستان این کار رو خودم کرده ام اونم با تابع عدد رندوم و گفتم بهتون. شما متوجه منظورم نشدید !!!!

الآن شما وقتی روی show کلیک می کنید تا div نمایش داده بشه به انتها آدرس یک # میخوره و مرورگر از اول هدر سایت نمایش داده میشه شاید من مثلا انتهای سایت باشم .

کدی که من در اول تاپیک گذاشتم رو ببینید و متوجه میشید که اسکرول سایت هیچ تغییری نمیکنه .

کد colors (http://barnamenevis.org/member.php?181541-colors) درسته ولی شاید این div در 1000 px از ارتفاع سایت باشه و وقتی روی لینک کلیک میشه دوباره از اول سایت نمایش داده میشه.

ممنون می شم اگر راهنماییمون کنید.
رضا قربانی
سه شنبه 02 خرداد 1391, 20:43 عصر
با کمک کدهای دوستان همین تاپیک مشکل رو حل کردیم و از هر کدوم یه قطعه ای رو کندیم و گذاشتیم :لبخند:. میذاریم تا بچه های دیگه هم استفاده کنند :
این کد جاوا اسکریپتشه:

function toggle(id) {
var ele = document.getElementById('toggleText' + id);
var text = document.getElementById('displayText' + id);
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "نمایش &darr;";
}
else {
ele.style.display = "block";
text.innerHTML = "بستن &uarr;";
}
}

و کد پی اچ پی که داخل حلقه قرار میگیره :


$RND=rand(1,99999);
echo'<a id="displayText'.$RND.'" href="javascript:toggle('.$RND.');">&lArr; اطلاعات </a>
<div id="toggleText'.$RND.'" style="line-height:20px;display: none">ttttttttttttttttttt</div>';

امیدوارم بدردتون بخوره.

کد رو برای این صفحه میخواستم که ردیف شده و می تونید ببینید: http://www.tourist-eco.com/shahid.php بچه ها کلی ثواب کردید:گیج:
با تشکر از دوستانی که برای این تاپیک وقت گذاشتند.
موفق باشید
Unique
سه شنبه 02 خرداد 1391, 23:53 عصر
الآن شما وقتی روی show کلیک می کنید تا div نمایش داده بشه به انتها آدرس یک # میخوره و مرورگر از اول هدر سایت نمایش داده میشه
دوست عزیز علت اینکه میاد ابتدای صفحه و اسکرول میخوره اینه که توی href مقدار # قرار دادید ! زمانی که شما توی تک a میخواین از جاوا اسکریپت استفاده کنید اگه توی Href بنویسین زیاد جالب نیست چون توی statusbar پایین browser مقدار javascript نمای شداده میشه ! شما میتونید از همون onclick استفاده کنید و توی href attribute بنویسین :

echo "<a class='displayText' onclick='Toggle($row['id'])' href='javascript:void(0);'>show</a>";
اینطوری scroll نمیخوره !

استفاده از RND بیخودیه ! شما اگه دارین از روی database میخونید بهتره از ID رکورد استفاده کنید که یکتا هستش ! اگر هم دارین یک حلقه مینویسین از روی یک فایل یا آرایه یک counter برابر صفر قرار بدید و توی حلقه یکی یکی بهش اضافه کنین ! کلا RND نمیخواد و نیاز نیست پردازش کد را با تاخیر روبرو کنید !
colors
چهارشنبه 03 خرداد 1391, 08:52 صبح
اصلا اگه قراره href چیزی نداشته باشه کلا این خاصیتو حذف کن و تو استایلت بهش cursor:pointer رو ... بده که شبیه لینک بشه, در این صورت چیزی به url اضافه نمیشه و ...

البته من توصیه میکنم به جای استفاده از تگ a از تگی دیگه ای مثلا span, p و یا div استفاده کن. اینجوری لینکهای بیخودی تو صفحت ایجاد نمیشه و موتورهای جستجورو دیوانه نمیکنی. چون تا جای که من دید شهیدان زیادی تو صفحت داشتی