পাঠ্যের গোপন ব্লক স্থাপন কোনও ওয়েবসাইটের পৃষ্ঠার চাক্ষুষ ধারণাটি উন্নত করে - এটি ডিজাইনার যেভাবে পোস্ট করেছেন তথ্যের পরিমাণ নির্বিশেষে নকশাকর্তাকে যেমন নকশা করেছিলেন ঠিক তেমন ব্রাউজারে লোড করে দেয়। তদ্ব্যতীত, এটি দর্শকের পক্ষে আরও সুবিধাজনক - তথ্যের প্রয়োজনীয় ব্লকের সন্ধানে, তাকে পুরো অ্যারেটি দেখতে হবে না, তবে কেবল "আইসবার্গসের ছোট টিপস"।
এটা জরুরি
এইচটিএমএল এবং জাভাস্ক্রিপ্টের প্রাথমিক জ্ঞান।
নির্দেশনা
ধাপ 1
এইচটিএমএল পৃষ্ঠায় পাঠ্যের পছন্দসই ব্লকগুলি আড়াল করতে এবং প্রদর্শন করতে একটি কাস্টম জাভাস্ক্রিপ্ট ফাংশন ব্যবহার করুন। সমস্ত ব্লকের জন্য একটি সাধারণ ক্রিয়াকলাপ তাদের প্রত্যেককে আলাদাভাবে কোড যুক্ত করার চেয়ে অনেক বেশি সুবিধাজনক। পৃষ্ঠার উত্স কোডের শিরোনাম অংশে, খোলার এবং সমাপনী স্ক্রিপ্ট ট্যাগগুলি রাখুন এবং তাদের মধ্যে একটি নামের সাথে একটি খালি ফাংশন তৈরি করুন, উদাহরণস্বরূপ, অদলবদল এবং একটি প্রয়োজনীয় ইনপুট প্যারামিটার আইডি: ফাংশন স্যুপ (আইডি) {}
ধাপ ২
কোঁকড়া ধনুর্বন্ধনীগুলির মধ্যে ফাংশনের শরীরে জাভাস্ক্রিপ্ট কোডের দুটি লাইন যুক্ত করুন। প্রথম লাইনে পাঠ্যের ব্লকের বর্তমান অবস্থা পড়তে হবে - এর দৃশ্যমানতা চালু বা বন্ধ রয়েছে কিনা। একটি নথিতে এ জাতীয় বেশ কয়েকটি ব্লক থাকতে পারে, সুতরাং প্রত্যেকের নিজস্ব নিজস্ব শনাক্তকারী থাকতে হবে - এটি তার ফাংশন যা কেবলমাত্র ইনপুট প্যারামিটার হিসাবে আইডি গ্রহণ করে। এই সনাক্তকারী ব্যবহার করে, এটি নথিতে প্রয়োজনীয় ব্লকটি অনুসন্ধান করে, দৃশ্যমানতা / অদৃশ্যতার মান (প্রদর্শনের সম্পত্তিটির অবস্থা) এসডিসপ্লে ভেরিয়েবলের জন্য নির্ধারণ করে: sDisplay = document.getElementById (id).style.display;
ধাপ 3
দ্বিতীয় লাইনের পাঠ্যগুলির কাঙ্ক্ষিত ব্লকের প্রদর্শনের বৈশিষ্টটিকে বিপরীতে পরিবর্তন করা উচিত - পাঠ্যটি দৃশ্যমান থাকলে আড়াল করুন এবং এটি লুকিয়ে আছে কিনা তা দেখান। এটি নিম্নলিখিত কোড দিয়ে করা যেতে পারে: document.getElementById (id).style.display = sDisplay == 'কিছুই নয়'? '': 'কেউ নয়';
পদক্ষেপ 4
শিরোনাম বিভাগে নিম্নলিখিত স্টাইলশিটটি যুক্ত করুন: একটি {কার্সার: পয়েন্টার you আপনি অসম্পূর্ণ লিঙ্ক ট্যাগের উপরে ঘোরাফেরা করার সময় মাউস পয়েন্টারটি সঠিকভাবে প্রদর্শন করতে আপনার এটির প্রয়োজন হবে। এই জাতীয় লিঙ্কগুলির সাহায্যে, আপনি পৃষ্ঠাতে সংগঠিত করে পাঠ্য ব্লকের দৃশ্যমানতা / অদৃশ্যতা টগল করুন।
পদক্ষেপ 5
প্রতিটি লুকানো ব্লকের আগে এই টগল লিঙ্কগুলি পাঠ্যের শেষে এবং ব্লকের পাঠ্যের শেষে একটি অনুরূপ লিঙ্ক যুক্ত করুন। স্প্যান ট্যাগগুলিতে অদৃশ্য পাঠ্য সংযুক্ত করুন যা তাদের শৈলীর বৈশিষ্ট্যে অদৃশ্যতা সেট করেছে। উদাহরণস্বরূপ: পাঠ্যটি প্রসারিত করুন +++ এটি লুকানো পাঠ্য --- এই উদাহরণে, তিনটি প্লাসের লিঙ্কে ক্লিক করা উপরের ফাংশনটিকে অনক্লিক ইভেন্টে কল করবে, এটি ব্লকের আইডি দৃশ্যমান করে দেবে passing এবং ব্লকের ভিতরে একই ফাংশনগুলির সাথে তিনটি বিয়োগের লিঙ্ক রয়েছে - এটিতে ক্লিক করা পাঠ্যটি আড়াল করবে।
পদক্ষেপ 6
পূর্ববর্তী ধাপে বর্ণিত বর্ণনার মতো প্রয়োজনীয় সংখ্যক পাঠ্য ব্লক তৈরি করুন, স্প্যান ট্যাগের আইডি বৈশিষ্ট্যে আইডি পরিবর্তন করতে এবং দুটি লিঙ্কে অনক্লিক ইভেন্ট দ্বারা ফাংশনটিতে স্থানান্তরিত ভেরিয়েবলের কথা স্মরণ করে।
