anvar
دوشنبه 06 شهریور 1396, 22:45 عصر
راهی که برای حل این مسئله انتخاب کردید کلا اشتباهه!
هیچوقت از رویداد Focus برای اینکارها استفاده نمیکنن - راه استاندارد استفاده از جاوا اسکریپت یا JQUERY هست که در رویداد کلیک کنترل مورد نظر (در مثال شما لینک) باید نمایش بخش مورد نظر رو انجام بدید.
کد زیر رو در فایل test.html خودتون ذخیره کنید (کدهای قبلی این فابل رو کاملا پاک کنید)- با کلیک بر رروی لینک بخش مورد نظر نشان داده می شود و با کلیک بر روی دکمه خروج این بخش بسته می شود و به صفحه بر می گردید - البته این کدها فقط جنبه آموزشی دارن
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#panel
{
width:70%;
height:70%;
background:red;
position:fixed;
z-index:30;
top:22%;
left:15%;
}
</style>
</head>
<body>
<div id="shomare" class="frame">
<a href="#" onclick="myFunction()">13600 تومان</a>
<span id="panel" style="display: none;">
<div><img class="kharid" src="khazar10.png" alt=""></div>
<div>
<form action="">
<label for="">نام :</label><br>
<input type="text">
</form>
</div>
<br>
<input type="button" onclick="myFunction()" value="خروج">
</span>
</div>
<script type="text/javascript">
function myFunction()
{
var x = document.getElementById('panel');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
</body>
</html>
در ضمن هیچوقت در HTML از تگ span بعنوان یک ظرف بلوک محور استفاده نکنید (مثلا کنترل form یا حتی Div را در آن قرار ندهید)- از این تگ فقط برای نمایش های In-line و در حد نمایش قسمتی از یک خط استفاده می شود نه بیشتر (این قسمت ها رو من اصلاح نکردم تا ساختار قبلی شما باقی بمونه)