آگهی
article

مخفی کردن عناصر وب با CSS

css-display-none

گاهی مواقع در طراحی صفحات وب و کدنویسی HTML و CSS ممکن است بنا به دلایل مختلف نیاز به این داشته باشیم که مواردی را از چشم کاربران عادی پنهان و مخفی کنیم، به طور مثال شرایطی پیش می آید که بخواهیم بین کاربران عادی و ربات ها تفکیک قائل شویم، یعنی به طور مثال یک فیلد را فقط به ربات ها نشان دهیم، در چنین شرایطی برخی ترجیح می دهند از برنامه نویسی سمت سرور مانند PHP یا ASP در این گونه موارد استفاده کنند و برخی نیز به جاوا اسکریپت متوصل می شوند، اما در کنار همه این روش ها که در جای خود کاربرد دارند، شاید یکی از بهترین و کاربردی ترین راه ها، استفاده از قابلیت های CSS باشد که در ادامه آموزش به آنها اشاره می کنیم.

چرا عناصر را در صفحه وب پنهان می کنیم؟


شاید این سوال در ذهنتان باشد که چه نیازی است عناصر را در صفحات وب مخفی و پنهان کنیم؟
البته این کار همیشه هم ضرورت ندارد، بلکه استفاده از این قابلیت در صفحات وب بستگی به شرایط و نیاز شما دارد، به طور مثال فرض کنید یک سیستم ضد ارسال هرزنامه یا اسپم ایجاد کرده اید که متکی بر پر شدن یا نشدن یک فیلد در یک فرم HTML است، به این صورت که اگر فیلد مورد نظر پر شود یعنی کاربر یک ربات است و اگر خالی باشد یعنی کاربر یک انسان است، همان طور که می دانیم ربات ها صفحات وب را معمولا بدون پردازش CSS و به صورت کد HTML دریافت می کنند، لذا آن فیلد مخفی برای آنها قابل رویت است و بنابراین به همراه سایر فیلدهای موجود در فرم، آن را هم به احتمال خیلی زیاد با عباراتی پر می کنند، اما با مخفی کردن فیلد برای کاربران عادی آنها نمی توانند در شرایط معمولی فیلد را مشاهده کنند و لذا نباید اطلاعاتی در آن وارد نمایند، حتی می توان با درج عبارتی مانند "در این فیلد چیزی ننویسید" کاربرانی که استایل CSS در مرورگرشان غیر فعال است را نیز راهنمایی کرد، یا به طور مثال اگر بخواهیم یک ابزار یا یک عبارت، بنا به دلایل مختلف فقط برای ربات ها قابل رویت باشد، نیاز به استفاده از CSS است.

استفاده از display:none


ابتدایی ترین روشی مخفی کردن عناصر در صفحات وب با CSS استفاده از خاصیت display و با مقادیر none است، به این صورت لایه یا بلاک مورد نظر با وجود اینکه در صفحه وجود دارد، ولی از چشم کاربران عادی (در شرایط معمول و با فعال بودن استایل CSS) پنهان است، برای استفاده از این خاصیت کافی است آن را به صورت یک کلاس یا آی دی و یا به صورت استایل خطی به عنصر مورد نظر نسبت دهیم.
<style type="text/css">
.hidden{
    display:none;
}
</style>
نکته: بعضا مشاهده می شود که برای مخفی کردن لینک ها یا به اصطلاح فریب دادن ربات های جستجوگر مانند ربات گوگل، از این خاصیت استفاده می شود،  به یاد داشته باشیم ربات ها و از جمله ربات گوگل بر اساس الگوریتم های خود این گونه موارد را شناسایی کرده و در صورت تکرار ممکن است سایت یا وبلاگ ما را در لیست سیاه خود قرار داده یا حداقل رتبه آن را کاهش دهند، لذا استفاده از display:none باید با دقت و به تعداد خیلی کم انجام شود.

استفاده از visibility:hidden


یکی دیگر از خاصیت های CSS که در مخفی کردن عناصر در صفحات وب کاربرد دارد، خاصیت visibility:hidden است، البته عملکرد visibility:hidden تا حدود زیادی مشابه display:none است، با این تفاوت که visibility:hidden اگرچه عنصر را در صفحه مخفی می کند، اما بر خلاف display:none اثر آن را به طور کامل از بین نمی برد، به عنوان مثال اگر یک بلاک با ارتفاع 200 پیکسل را با display:none مخفی کنیم، فضای 200 پیکسلی اشغال شده نیز از بین می رود، اما اگر همین کار را با visibility:hidden انجام دهیم، بلاک مخفی می شود، بدون اینکه 200 پیکسل فضای اشغال شده از بین برود.
<style type="text/css">
#visibility{
    visibility:hidden;
}
</style>

استفاده از position:absolute و left


تکنیک هایی که در بالا اشاره شد اگرچه روش هایی استاندارد و در جای خود قابل استفاده هستند، اما کاربرد زیاد آنها در یک صفحه به لحاظ سئو (SEO) یا بهینه سازی موتورهای جستجو (Search Engine Optimization) توصیه نمی شود، از این رو طراحان و برنامه نویسان از روش دیگری برای مخفی نمودن عناصر HTML در صفحات وب استفاده می کنند، در این روش ابتدا با استفاده از خاصیت position:absolute عنصر را به حالت شناور در آورده و سپس با کمک left و در نظر گرفتن یک مقدار منفی برای آن، عنصر را از دید کاربران مخفی می کنند بدون اینکه تاثیری در ظاهر صفحه ایجاد شود.
<style type="text/css">
.accessible{
    position:absolute;
    left:-9999px;
    top:auto;
    width:5px;
    height:5px;
    overflow:hidden;
}
</style>
توضیح:
- مقادیر absolute برای خاصیت position باعث شناور شدن بلاک یا عنصر مورد نظر می شود.
- مقدار منفی برای left، عنصر را به بیرون از دید کاربر و خارج از صفحه نمایش هدایت می کند.
- مقادیر width و height می توانند صفر در نظر گرفته شوند، اما برای اطمینان از اینکه ربات هایی مانند ربات گوگل محتوای بلاک را پردازش کنند، بهتر است مقداری بیش از صفر یا 1 برای ارتفاع و عرض در نظر گرفته شود.
- خاصیت overflow با مقادیر hidden باعث می شود که محتوای مازاد بر فضای بلاک، مخفی شود.
نکته: وقتی از مقادیر منفی برای خاصیت left استفاده می کنیم، باید در نظر داشته باشیم که چینش (direction) صفحه در تگ body به صورت پیش فرض یا چپ به راست (ltr) باشد، در غیر این صورت (یعنی اگر تگ body چینش rtl یا راست به چپ داشته باشد) در صفحه اسکرول افقی خواهیم داشت، در این گونه موارد به جای left باید از right و مقادیر منفی برای کلاس مخفی استفاده کنیم یا اینکه چینش را در تگ body به حالت ltr تغییر دهیم و یا اگر ناچار به استفاده از چینش rtl هستیم، آن را به بلاک های زیرمجموعه نسبت دهیم نه به تگ body.
sectionدسته بندی: آموزش کاربردی » CSS
related مطالب بیشتر:
» چسبیدن فوتر قالب به پائین صفحه با CSS
» حذف اسکرول افقی (Horizontal Scroll) با CSS
» آموزش استفاده از فونت فارسی در وب با CSS
» تنظیم موقعیت در وسط و حذف حاشیه ها با CSS
» ساخت منوی کشویی با تگ ul li و CSS
commentنظرات (۴۶ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: رضا
۱۳:۳۷ ۱۳۹۵/۰۵/۱۳
ممنون به خاطر مطلب خوبتون
ولی اگر مقدا راست و چپ هر دو باهم اومده باشن چی میشه؟ در این حالت چرا وقتی جهت صفحه rtl هست صفحه اسکرول افقی پیدا میکنه ولی وقتی روی ltr هست پیدا نمیکنه و عنصر مخفی میشه؟
left: -9999px;
right: -9999px;
پاسخ: 
استفاده از خاصیت right و left هر دو با مقدار منفی عملا ممکن نیست! نمی شود که عنصر هم از سمت چپ و هم از سمت راست فاصله منفی داشته باشد! در این حالت مرورگر معمولا یک مورد را به عنوان پیش فرض در نظر گرفته و خاصیت دیگر را نادیده می گیرد!
نویسنده: رضا
۱۳:۴۴ ۱۳۹۵/۰۵/۲۴
سلام
چطور میشه یه دکمه ساخت که با زدنش بقیه المان ها مخفی بشن بعد دوباره ر بزنی برگردن سر جاشون مثل مثلا دکمه ای که پست سایت رو به صورت فول اسکریت بیاره
ممنون
پاسخ: 
چنین امکانی را باید با کدنویسی CSS و JS (و یا حتی زبان های سمت سرور مانند PHP) ایجاد کنید، توضیح کوتاهی برای سوالتان قابل ارائه نیست!
نویسنده: غریب
۱۶:۱۱ ۱۳۹۵/۰۵/۲۹
سلام
یک سوالی برام پیش اومده بنده از کدی استفاده میکنم که استایلش رو جایی قراره اپلود کنم استایل در سایت دیگه و ادامه کد در سایت بنده حالا اومدم یک شیوه بکار ببرم اینجوری که کاری کنم که اگه استایل ارور داد و سایتش قطع بود ادامه کد بنده غیر فعال بشه
بنده اومدم یک تگ دایو با استایل display:none برای کل کد گذاشتم و این تگ رو هم داخل یک دایو با کلاس مثلا bb قرار دادم و در فایل استایل خواصیت bb رو display:none قرار دادم
این کارو برای این انجام دادم که تا وقتی استایل ادرس دهیش کار میکنه این تگ display:none که در داخل کلاس bb قرار داره قائدتا باید غیر فعال باشه و کد کامل کار کنه اما اگر استایل فراخونی شده ارور بده تگ دایو با کلاس bb هم بی خواصیت میشه و بقیه کد غیر فعال میشه
اما هر کار کردم نشد میشه راهنماییم کنید مشکل کجاست ؟
بطور مثال
فایل استایل فراخوانی شده
<style>.bbb{display: none}</style>
<div class="bbb">
<div style="display: none">
</div>
کد مربوطه که قراره با از کار افتادن استایل غیر فعال بشه کامل
</div>
و لطفا راهنمایی کنید چجوری میتونیم یک فایل فراخونی شده رو با سی اس اس یا جاوا اسکریپت غیر فعالش کنم مثلا با دادن کلاس یا ایدی display: none کنم جوری که اصلا فراخونی نشه چون لینکهاش مخفی میشه اما همچنان گویا فراخوانی میشه ممنون و خسته هم نباشید
پاسخ: 
به نظر برداشت شما از نحوه تعریف تگ های HTML صحیح نیست! دقت کنید که تگ div اول با آخرین div بسته می شود نه با div بعدی، و تگ div میانی با div بعد خود بسته می شود، این یک قانون در HTML است، لذا با توجه به کدهای فعلی، محتوایی درون تگ با استایل display:none وجود ندارد که بخواهد مخفی شود، به نظر باید از نمونه کد زیر پیروی کنید:
<!--استایل درون صفحه-->
<style>.bbb{display: none;}</style>
<!--استایل از یک فایل خارجی با استفاده از تگ link-->
<style>.bbb{display: block;}</style>
<div class="bbb">
test
</div>
نویسنده: غریب
۱۳:۴۱ ۱۳۹۵/۰۵/۳۰
سلام مجدد
بله بنده با تگ های دیگه هم امتحان کردم قبلا تگی که داخل کد فقط یدونه باشه اما بازم جواب نداد روشی که گفتید گرچه با نوع کد بنده کمی در تضاد هست اما روش کار امدی هست و مشکلم رو حل کرد واقعا ممنون بابت اموزشتون
فقط یه درخواست دیگه دارم میدونم ممکنه مربوط به این بخش نشه اما بزرگواری کنید راهنماییم کنید در همین بخش همونطور که میدونید روشی وجود داره که میشه در ادرس دهی تصویر کاری کرد که اگه تصویر اول ارور بده تصویر دوم جایگزینش بشه مثل کد زیر
<img src="لینک تصویر اصلی شما" onerror="this.src='لینک تصویر جایگزین شما'" alt=""> 
میخواستم ببینم راهی برای فایلهای فراخوانی استایل و جاوا اسکریپت هم هست یا نه یعنی برای اطمینان دو فایل استایل یکسان و یا جاوا اسکریپت در دو منبع اپلود بشه که در صورت قطع موقت فایل دوم فراخونی بشه البته میدونم میشه همزمان قرار داد اما موضوع اینه که کد حجیم میشه بعضی کدها با از کار افتادن استایل واقعا وحشتناک میشن مثل منوهای ابشاری و غیره
راهی برای قرار دادن استایل پشتیبان وجود داره؟
ممنون و خسته نباشید استاد
پاسخ: 
می توانید یک تابع برای ساخت کد درج فایل JS یا CSS به صورت نمونه زیر داشته باشید:
<script type="text/javascript">
function loadJSCSSFile(filename, filetype){
if (filetype == "js"){
var fileref=document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", filename);
}
else if (filetype == "css"){
var fileref=document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", filename);
}
if (typeof fileref != "undefined"){
document.getElementsByTagName("head")[0].appendChild(fileref);
}
}
</script>
و تابع را به شکل زیر فراخوانی کنید:
<script type="text/javascript" src="file.js" onerror="loadJSCSSFile('new_file.js', 'js')"></script>
دقت کنید که در قسمت نام فایل با نام به همراه آدرس کامل فایل درج شود! در واقع این قسمت مربوط به پارامتر src است!
نویسنده: غریب
۱۰:۵۸ ۱۳۹۵/۰۶/۰۱
مشکل بنده اینه که فایلهای جی اس بنده از document.write استفاده میکنند و کار نکردن این کد شما بدلیل همین هست شاید در صورتی که در فایلهای سی اس اس درست عمل میکنه ایا راهی هست مشکل بنده رو رفع کنه ؟
گاهی در فایل جی اس استایل و قسمتی از خود کد رو قرار میدم برای کاهش درخواست از سرور و سرعت بیشتر ایا راهی در این خصوص بنظرتون میرسه؟
پاسخ: 
انتخاب این روش ها برای بهینه سازی سایت به دلیل مشکلات و ناسازگاری های اینچنینی چندان توصیه نمی شود و استفاده از آن متداول نیست (البته ممکن است مشکل اشاره شده با بررسی قابل رفع باشد، اما در کل به دلیل پیچیدگی های بی موردی که به وجود می آید، توصیه نمی شود)، اصولا ضرورتی هم برای این سختگیری ها وجود ندارد، توصیه می کنیم قبل از هر چیز سایت خود را در یک سرور با کیفیت مناسب میزبانی کنید و اگر قصد بهینه سازی فایل ها را دارید، صرفا تحت یک دامنه فایل های CSS و JS را به روش های مختلف مانند فشرده سازی و... به کمترین حجم تبدیل نمائید، در وب و به تجربه باید همیشه بین اصل تفکیک فایل ها و تجمیع آنها یک تعادل برقرار کنید، به طور مثال گاهی کدهایی در یک صفحه وجود دارد که صرفا به افزایش حجم آن منجر می شود و هیچ نقشی در امکانات آن صفحه ندارد که تا حد امکان باید این موارد در فایلی جداگانه تفکیک شوند، همچنین باید موارد مشابه و پرکاربرد در فایل های جدا تجمیع شوند تا در هر صفحه تا حد امکان صرفا کدهای لازم برای همان صفحه بارگذاری شوند.
نویسنده: angel
۱۹:۴۴ ۱۳۹۵/۰۶/۱۹
سلام خسته نباشید. میخاستم بدونم وقتی که برای انجام کارهای گرافیکی سایت، المان ها را مخفی و آشکار میکنیم، روی سیوی سایت تاثیر منفی میگذارد؟ مثلا یک کادر را مخفی میکنیم و با زدن یک دکمه این کادر آشکار میشود. و یا برای ریسپانسیو بودن صفحه یک المان را برای صفحه نمایش های کوچک مخفی میکنیم و برای صفحه نمایش های بزرگ آشکار میکنیم.
پاسخ: 
به طور کلی و بر طبق آخرین اطلاعات و شواهد موجود، موتورهای جستجو اهمیت زیادی به استایل صفحه شما نمی دهند (و اغلب حتی آن را پردازش نیز نمی کنند)، همچنین الگوریتم های موتورهای جستجوی معروف و از جمله گوگل طی چندین و چند سال به قدری توسعه یافته اند که می توانند با استفاده از فاکتورهای مختلف سایت های اسپم را تشخیص دهند، در مجموع اگر سایتتان یک سایت متعارف و معمول است و از کدهای شناخته شده CSS استفاده می کند، نگرانی از بابت این قضیه نداشته باشید، مگر اینکه به تعداد خیلی زیاد و غیرمتعارفی (در مقایسه با محتوای عادی) عناصر را مخفی کرده باشید که در این صورت می تواند یک ریسک فاکتور برای سایتتان به حساب بیاید!
نویسنده: ناشناس
۱۹:۵۱ ۱۳۹۶/۰۳/۰۵
سلام - من کد visibility:hidden میخوام برای مخفی کردن برچسپ های سایت, چی داخل این کد بنویسم و داخل کدوم فایل و یا قیمت از وردپرس قرار بدم؟ ممنون میشم اگه جواب بدید
پاسخ: 
باید خروجی مد نظر (در سوال شما بخش برچسب ها) را در یک div با کلاس CSS مشخص قرار دهید (برای این منظور نیاز به مراجعه به انجمن های وردپرس، پیدا کردن سورس بخش ایجاد برچسب ها و ویرایش آن است)، سپس در استایل قالب سایت خود ویژگی های آن کلاس را تعیین نمائید.
نویسنده: atena
۱۳:۴۱ ۱۳۹۷/۰۴/۱۳
خدا خیرتون بده واااااقعاااااا ممنونم
نویسنده: samira
۱۱:۴۵ ۱۳۹۷/۰۴/۱۷
سلام من میخوام وقتی روی یک button کلیک میکنم و بخش جدیدی نمایش داده میشه، خود button مخفی بشه
چون داخل بخش جدید یک کلید برای بستن گذاشتم که وقتی زده میشه هم بسته بشه هم button دوباره نمایش داده بشه
چه دستوری باید استفاده کنم؟
پاسخ: 
برای اینگونه موارد معمولا از توابع جاوا اسکریپتی استفاده می شود، به طور مثال:
<style type="text/css">
#id-show{
visibility: visible;
}
#id-hide{
visibility: hidden;
}
</style>
<script type="text/javascript">
function toggleButton(id_show, id_hide, param){
var elm_show = document.getElementById(id_show);
var elm_hide = document.getElementById(id_hide);

switch(param){
case 'open':
elm_show.style.visibility = 'hidden';
elm_hide.style.visibility = 'visible';
break;
case 'close':
elm_show.style.visibility = 'visible';
elm_hide.style.visibility = 'hidden';
break;
}
}
</script>
<input type="button" id="id-show" value="Open" onclick="toggleButton('id-show', 'id-hide', 'open')">
<input type="button" id="id-hide" value="Close" onclick="toggleButton('id-show', 'id-hide', 'close')">
نویسنده: magsho
۰۹:۲۲ ۱۳۹۷/۰۹/۰۷
با سلام ممنون از شما
اگر من بخوام از یه آیتم در حالت ریسپانسیو حذف کنم چطور میتونم این کار و انجام بدم ؟
آیا با کد css این امکان پذیر؟
پاسخ: 
اگر منظورتان از حذف پنهان کردن عنصر است، بله با CSS می توانید این کار را انجام دهید، مثال:
@media screen and (max-width: 600px) {
#block {
display: none;
}
}
در این حالت تگ با آی دی فرضی block به کلی از سورس HTML حذف نمی شود اما از نظر ظاهری مخفی خواهد شد.
نویسنده: محمود
۱۳:۰۸ ۱۳۹۹/۰۱/۰۲
سلام استاد گرامی
قبلن از اینکه سایت بسیار پر بار ، عالی و بدرد بخور دارید به شما تبریک می گویم.
من می خام با رفتن موس روی ...کلمه مورد نظر... کلمه مورد نظر ظاهر شود. یعنی عنصر پنهان آشکار شود.
کد زیر را با CSS نوشتم ولی مشکل دارم اگر لطف کنی کد کامل را برام بنویسید خیلی متشکر می شوم .
<!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=utf-8" />
<title>Untitled Document</title>
<style>
body{
direction: rtl;
}
.parent{
position: relative;
text-align: center;
}
.jakhali{
display:none;
position: absolute;
top: 0;
left: 0;
}
.parent:hover .jakhali {
display:block
}
</style>
</head>
<body>
<p>من می خام با رفتن موس روی <span class="parent">......................<span class="jakhali">کلمه مورد نظر.</span></span> کلمه مورد نظر ظاهر شود.</p>
</body>
</html>
پاسخ: 
نظر لطف شما است، در خصوص سوالتان کد بالا برای نمایش متن مورد نظر در جای خالی با بردن ماوس، ویرایش و اصلاح شد.
نویسنده: محمود
۱۲:۵۴ ۱۳۹۹/۰۱/۰۳
سلام و احترام.
خیلی عالی بود، بسیار متشکر هستم، تمام.
نویسنده: امیرعلی
۱۲:۳۹ ۱۳۹۹/۰۲/۲۲
با سلام
بنده میخواستم بدانم که میشود تگ div را با این روش ها پنهان کرد من میخواهم افزونه ی وردپرسی را که فارسی سازی کردم را کاملا بومی کنم. به این صورت که تگ div که rss سایت سازنده افزونه در آن نمایش داده میشود را مخفی کنم.
آیا میتوانم در همان فایل css ایی که برای راستچین کردن افزونه استفاده کردن را استفاده کنم. من تونستم نام تگ رو پیدا کنم ولی نتونستم با ویرایش کدهای افزونه اون رو مخفی کنم (چون جایی رو ندیدم که پاک کنم)
لطفا نمونه سورس برای این کار رو بگذارید
خیلی ممنون
پاسخ: 
بله در صورتی که تگ اصلی را پیدا کنید با استایل خطی یا نسبت دادن کلاس می توانید عناصر HTML را با CSS مخفی کنید، مثال:
<style>
.hidden{
display: none;
}
</style>
<div class="hidden"></div>
دقت کنید که استایل CSS باید در خروجی HTML صفحه وجود داشته باشد و قوانین آن با استایل دیگری در همان صفحه تداخل نداشته باشد.
نویسنده: ali
۱۸:۴۷ ۱۳۹۹/۰۴/۰۳
با سلام
من یک پروژه طراحی کردم میخوام که وقتی کاربر روی ادامه مطلب کلیک کرد در خود صفحه بقیه مطالب را ببینه باید چه دستوری را بنویسم؟
پاسخ: 
برای این منظور در کل دو راه حل وجود دارد، یا باید از جاوا اسکریپت استفاده و تابعی داشته باشیم که ادامه مطلب را که در یک بلاک div مخفی وجود دارد نمایش دهد، مثال:
<style>
#test {
display: none;
width: 50%;
padding: 8px;
text-align: center;
border: 1px solid #E5E5E5;
}
</style>
<script>
function readMore() {
var elm = document.getElementById('test');

if(elm.style.display === '' || elm.style.display === 'none') {
elm.style.display = 'block';
} else if(elm.style.display === 'block') {
elm.style.display = 'none';
}
}
</script>
<button onclick="readMore()">ادامه مطلب</button>
<div id="test">
متن مورد نظر
</div>
یا اینکه از تکنیک Ajax استفاده کنیم و با کلیک بر روی دکمه، درخواست به سرور ارسال و نتیجه را در یک بلاک div نمایش دهیم، برای این حالت نیاز است که آموزش های مقدماتی Ajax را مطالعه و با PHP و MySQL نیز آشنا باشیم.
نویسنده: الهام
۱۵:۵۵ ۱۳۹۹/۰۵/۰۶
سلام یه سوال داشتم که هرچی سرچ کردم جوابش پیدا نشد
چجوری ادامه مطلب رو با کلیک روی کلمه مثلا بیشتر... ببینیم؟
یعنی اول نباشد بعد با کليک روی بیشتر نشان داده شود؟
پاسخ: 
برای این کار معمولا دو قسمت برای درج خلاصه محتوا و ادامه آن در برنامه های WYSIWYG در نظر می گیرند (این دو قسمت می توانند در یک ویرایشگر باشند و به فرض با یک تگ اختصاصی از هم تفکیک شوند یا اینکه در دو ویرایشگر مجزا درج شوند)، به این صورت در دیتابیس دو قسمت مجزا برای خلاصه و ادامه مطلب در دسترس است و می توانیم به نحو دلخواه شکل نمایش آن در سمت کاربر را طراحی کنیم، به فرض خلاصه محتوا در یک بلاک به صورت display با مقادیر block باشد و قسمت دیگر به صورت مخفی، با استفاده از جاوا اسکریپت و CSS دکمه ای به شکل نمونه زیر طراحی می کنیم:
<style>
#content {
display: none;
}
</style>
<script>
function toggleShowHide(id) {
var elm = document.getElementById(id);

if(elm.style.display !== 'block'){
elm.style.display = 'block';
} else{
elm.style.display = 'none';
}
}
</script>
<input type="button" value="Show/Hide More..." onclick="toggleShowHide('content');">
<div id="brief">خلاصه مطلب</div>
<div id="content">ادامه مطلب</div>
در صورت آشنایی با Ajax همین روش را می توان به سبک دیگری طراحی کرد.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ کوتاه و مختصر داده خواهد شد!
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.





6 × 2
 refresh
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form عاطفه مرادی
در:
سلام. من تازه یادگیری html رو شروع کردم و برای وبسایتمون برروی کنترل پنل html می نویسم. از طراح وبسایت خواستم که دسترسی جاوا را...
۱۳۹۹/۰۵/۱۹

form Amir Rahimi
در:
سلام و خسته نباشید من یک سوالی داشتم که مربوط به این بحث نیست سوال من اینه که یه کد یا . ....
۱۳۹۹/۰۵/۱۸

form محمد
در:
سلام اگر بخواهیم هدر سایت در گوشی های موبایل مخفی بشه از چه کدی باید استفاده کرد. کد زیر کلا مخفی میکنه در صورتیکه من...
۱۳۹۹/۰۵/۱۸

form shayan
در:
با سلام وقت به خیر من میخوام تو یه زبانه ای که در واقع متن قرار دادم لینک اسکرول بالا در حده پیکسل...
۱۳۹۹/۰۵/۱۷

form mahtab
در:
ببخشید اگه انتی ویروس رو غیرفعال کنیم برای باز کردن وب که باز نمیشه دوباره میتونیم آنتی ویروس رو فعال کنیم ؟؟ ...
۱۳۹۹/۰۵/۱۵

form امیرمحمد خلیلی
در:
ببخشید چجوری میتونم یه عکس از کاربر بگیرم و نمایشش بدم؟
۱۳۹۹/۰۵/۱۵

form elias
در:
خسته نباشید کاری که گفته بودید انجام دادم ولی رفرش می کنم همه لینک ها بر می گرده مثل اول می شه
۱۳۹۹/۰۵/۱۴

form سفی
در:
سلام و خسته نباشید من فایل آموزش html مقدماتی رو دیدم اما وقتی روی index.html کلیک راست کردم این گزینه ++edit..c رو ندیدم چه برنامه...
۱۳۹۹/۰۵/۱۰

form dnmax
در:
ببخشید ما اگه بخواهیم در وبلاگ مان به بقیه کدهای جاوا بدهیم وقتی کد رو پست میکنیم کد نشان داده نمیشود مثلا کد پخش آهنگ...
۱۳۹۹/۰۵/۰۹

form علیرضا
در:
سلام خیلی ممنون بابت مطالب مفیدتون عاالی بودن ان شالله همیشه موفق باشین.
۱۳۹۹/۰۵/۰۹

form محمد معین محب
در:
سلام میشه برای من یک اچ تی ام ال با بسازید . ممنون میشم
۱۳۹۹/۰۵/۰۸

form مهدی
در:
سلام و خسته نباشید یه مشکلی دارم که فکر کنم فقط وبگو میتونه کمک کنه سرور دانلود دارم و از اسکریپت دانلود vip...
۱۳۹۹/۰۵/۰۸

form neda
در:
با سلام من سایتی زدم از نظر ریسپانسیو هم اکی هست. فقط ارتفاعش از مانیتورهای مختلف به یک اندازه نیست. برای div اول ارتفاع...
۱۳۹۹/۰۵/۰۷

form الهام
در:
سلام یه سوال داشتم که هرچی سرچ کردم جوابش پیدا نشد چجوری ادامه مطلب رو با کلیک روی کلمه مثلا بیشتر... ببینیم؟ ...
۱۳۹۹/۰۵/۰۶

form فاطمه
در:
سلام و خسته نباشید من اومدم برای وبم کد نظرات جدید درج کنم و اتفاقی یه بخش بزرگی از کدها رو حذف کردم و...
۱۳۹۹/۰۵/۰۵
form دینا
در:
چطور نظرات خصوصی که واسه وبلاگم مینویسن پاسخ بدم
۱۳۹۹/۰۵/۰۳
form میثم
در:
سلام من برای دریافت چند تا اطلاعات از جداول سایتم مجبور شدم دستور زیر رو اجرا کنم. هر کدام از جداول حدود ۱.۰۰۰.۰۰۰...
۱۳۹۹/۰۵/۰۱
form علی
در:
با سلام و تشکر فراوان اگر یک div خودش درون div دیگری باشد مثل مثال زیر مقدارش رو چطور به دست بیاریم؟ در...
۱۳۹۹/۰۵/۰۱
form mahtab
در:
خیلی میبخشین بفرمایین
۱۳۹۹/۰۴/۳۱
form علی
در:
با سلام و درود فراوان با چه فرمانی میشه content یک متاتگ رو به دست آورد. مثلا یه لینکی رو بدیم و content مورد...
۱۳۹۹/۰۴/۳۰
form فاطمه
در:
سلام چرا وبلاگ ها برام بالا نمیاد فقط بخش مدیریت میاد وقتی میزنی مشاهده وبلاگ نمیاد وبلاگ دوستانم نمیاد حتی وبلاگ های دیگه...
۱۳۹۹/۰۴/۲۸
form امیر
در:
سلام می خواستم بپرسم چگونه می شه در وبلاگ خود هنگامی که بادید کننده وارد وبلاگ می شه آهنگ خودکار پخش بشه . ممنون...
۱۳۹۹/۰۴/۲۶
form mahtab
در:
سلام ببخشید من که اینو نوشتم شما هم جواب دادین : ببخشین چرا وبلاگ من تو لبتاپ دوستم باز نمیشه ؟؟؟ واسه...
۱۳۹۹/۰۴/۲۶
form مهدی
در:
سلام حالتون خوبه؟ ببخشید هی مزاحمتون میشم.. یک سوالی داشتم من عملیات ری رایت رو میخوام تو سی پنل انجام بدم صفحه لوگین رو باز...
۱۳۹۹/۰۴/۲۶
form مهدی
در:
خیلی خیلی ممنونم از وقتی که گذاشتید.. لطف کردید
۱۳۹۹/۰۴/۲۴
form mahtab
در:
ببخشین چرا وبلاگ من تو لبتاپ دوستم باز نمیشه ؟؟؟ واسه ی ویروس هم اسکن کرده اما نوشته چیزی نیس چیکار کنیم ؟؟؟؟ ...
۱۳۹۹/۰۴/۲۴
  در انتظار بررسی: ۰
 پاسخگویی به سوالات 1 تا 48 ساعت زمان می برد.