የተደበቁ የጽሑፍ ክፍሎችን ማስቀመጥ የድር ጣቢያ ገጽ ምስላዊ ግንዛቤን ያሻሽላል - የተለጠፈው መረጃ ብዛት ምንም ይሁን ምን ንድፍ አውጪው እንዳቀደው በትክክል በአሳሹ ውስጥ ይጫናል። በተጨማሪም ፣ ለጎብኝው የበለጠ ምቹ ነው - አስፈላጊውን የመረጃ እገዳ ለመፈለግ መላውን ድርድር መመርመር አይጠበቅበትም ፣ ግን ትንሽ “የበረዶ ንጣፎች ጫፎች” ብቻ ፡፡
አስፈላጊ ነው
የኤችቲኤምኤል እና የጃቫስክሪፕት መሠረታዊ እውቀት።
መመሪያዎች
ደረጃ 1
በኤችቲኤምኤል ገጽ ውስጥ የሚፈለጉትን የጽሑፍ ብሎኮች ለመደበቅ እና ለማሳየት ብጁ የጃቫ ስክሪፕት ተግባርን ይጠቀሙ። ለሁሉም ብሎኮች አንድ የተለመደ ተግባር ለእያንዳንዳቸው በተናጠል ኮድ ከማከል የበለጠ አመቺ ነው ፡፡ በገጹ ምንጭ ኮድ ራስጌ ክፍል ውስጥ የመክፈቻ እና የመዝጊያ ስክሪፕት መለያዎችን ያስቀምጡ ፣ እና በመካከላቸው በስም ባዶ ተግባርን ይፍጠሩ ፣ ለምሳሌ ፣ ስዋፕ እና አንድ አስፈላጊ የግቤት መለኪያ መታወቂያ: function swap (id) {}
ደረጃ 2
በመጠምዘዣ ማሰሪያዎች መካከል በሚሠራው አካል ላይ ሁለት መስመሮችን የጃቫ ስክሪፕት ኮድ ያክሉ። የመጀመሪያው መስመር የጽሑፍ ማገጃውን ወቅታዊ ሁኔታ ማንበብ አለበት - መታየቱ ቢበራም ባይጠፋም ፡፡ በሰነድ ውስጥ ብዙ እንደዚህ ያሉ ብሎኮች ሊኖሩ ይችላሉ ፣ ስለሆነም እያንዳንዱ የራሱ መለያ ሊኖረው ይገባል - መታወቂያ ብቸኛው የግብዓት መለኪያ ሆኖ የሚቀበለው የእርሱ ተግባር ነው። ይህንን መታወቂያ በመጠቀም በሰነዱ ውስጥ አስፈላጊ የሆነውን ብሎክ ይፈልጋል ፣ የታይነት / የማይታይነት እሴት (የማሳያ ንብረቱ ሁኔታ) ለ sDisplay ተለዋዋጭ: sDisplay = document.getElementById (id).style.display;
ደረጃ 3
ሁለተኛው መስመር የተፈለገውን የጽሑፍ ክፍል የማሳያ ንብረቱን ወደ ተቃራኒው መለወጥ አለበት - ጽሑፉ ከታዩ ይደብቁ እና የተደበቀ መሆኑን ያሳዩ ፡፡ ይህ በሚከተለው ኮድ ሊከናወን ይችላል-document.getElementById (id).style.display = sDisplay == 'የለም'? '': 'የለም';
ደረጃ 4
ራስጌው ክፍል ላይ የሚከተለውን የቅጥ ሉህ ያክሉ ፦ {cursor: ጠቋሚ} ባልተጠናቀቀ አገናኝ መለያ ላይ ሲያንዣብቡ የመዳፊት ጠቋሚውን በትክክል ለማሳየት ይህ ያስፈልግዎታል። በእንደዚህ ያሉ አገናኞች እገዛ የጽሑፍ ብሎኮችን ታይነት / አለመታየት ለመቀየር በገጹ ውስጥ ያደራጃሉ ፡፡
ደረጃ 5
እነዚህን የመቀያየር አገናኞችን ከእያንዳንዱ የተደበቀ ብሎክ በፊት በጽሁፉ ውስጥ አስቀምጣቸው ፣ እና በጽሁፉ መጨረሻ ላይ ባሉ ብሎኮች ውስጥ ተመሳሳይ አገናኝ ያክሉ ፡፡ በቅጡ ባህርያቶቻቸው ውስጥ የማይታዩ ሆነው በተቀመጡ ስፓን መለያዎች ውስጥ የማይታይ ጽሑፍን ያያይዙ ፡፡ ለምሳሌ-ጽሑፍን ዘርጋ +++ ይህ የተደበቀ ጽሑፍ ነው --- በዚህ ምሳሌ ላይ በሶስት ፕላስ አገናኝ ላይ ጠቅ በማድረግ ከላይ ያለውን ተግባር በኦንላይክ ክስተት ላይ ይደውላል ፣ ይህም እንዲታይ የማገጃውን መታወቂያ ያስተላልፋል ፡፡ እና በማገጃው ውስጥ ተመሳሳይ ተግባራት ያሉት የሦስት አገናኞች አገናኝ አለ - በላዩ ላይ ጠቅ ማድረግ ጽሑፉን ይደብቃል።
ደረጃ 6
በቀደመው እርምጃ ከተገለጸው ጋር ተመሳሳይ የሆነውን የጽሑፍ ብሎኮች ብዛት ይፍጠሩ ፣ በስፔን መለያ መታወቂያ አይነታ ውስጥ እና በሁለቱ አገናኞች ውስጥ በኦን ክሊክ ክስተት ወደ ተግባሩ በተላለፈው ተለዋዋጭ ውስጥ መታወቂያዎችን ለመቀየር ያስታውሱ ፡፡