অনেক ওয়েবসাইটে আমি লিঙ্কগুলি দেখতে পাচ্ছি href="#"
। এর মানে কী? এটা কি কাজে লাগে?
অনেক ওয়েবসাইটে আমি লিঙ্কগুলি দেখতে পাচ্ছি href="#"
। এর মানে কী? এটা কি কাজে লাগে?
উত্তর:
অ্যাঙ্কর ট্যাগগুলির প্রধান ব্যবহার - <a></a>
- হাইপারলিঙ্কগুলি । মূলত এর অর্থ হ'ল তারা আপনাকে কোথাও নিয়ে যায়। হাইপারলিঙ্কগুলিতে href
সম্পত্তিটির প্রয়োজন হয় , কারণ এটি কোনও অবস্থান নির্দিষ্ট করে।
একটি হ্যাশ - #
একটি হাইপারলিঙ্কের মধ্যে একটি এইচটিএমএল উপাদান আইডি নির্দিষ্ট করে যেখানে উইন্ডোটি স্ক্রোল করা উচিত।
href="#some-id"
বর্তমান পৃষ্ঠায় একটি উপাদান স্ক্রোল হবে <div id="some-id">
।
href="https://stackoverflow.com//site.com/#some-id"
site.com
যে পৃষ্ঠায় আইডি স্ক্রোল এবং যেতে হবে ।
href="#"
কোনও আইডি নাম নির্দিষ্ট করে না, তবে এর সাথে সম্পর্কিত অবস্থান রয়েছে - পৃষ্ঠার শীর্ষে। একটি অ্যাঙ্কর ক্লিক href="#"
করে স্ক্রোল অবস্থান শীর্ষে সরানো হবে।
ডাব্লু 3 ডকুমেন্টেশন অনুসারে এটি প্রত্যাশিত আচরণ ।
একটি উদাহরণ যেখানে হাইপারলিঙ্ক প্লেসোল্ডার বোধ করে তা টেমপ্লেট পূর্বরূপগুলির মধ্যে রয়েছে। টেমপ্লেটগুলির জন্য একক পৃষ্ঠার ডেমোগুলিতে, আমি প্রায়শই দেখেছি <a href="#">
যাতে অ্যাঙ্কর ট্যাগটি হাইপারলিংক হয় তবে কোথাও যায় না। href
সম্পত্তি ফাঁকা রাখবেন না কেন ? একটি ফাঁকা href
সম্পত্তি আসলে বর্তমান পৃষ্ঠায় একটি হাইপার লিঙ্ক। অন্য কথায়, এটি একটি পৃষ্ঠা রিফ্রেশের কারণ হবে। আমি যেমন আলোচনা করেছি, href="#"
এটি একটি হাইপারলিঙ্কও এবং স্ক্রোলিংয়ের কারণ। অতএব, হাইপারলিংক স্থানধারকদের জন্য সর্বোত্তম সমাধানটি হ'ল href="#!"
এখানে ধারণাটি হ'ল আশা করা যায় যে এখানে পৃষ্ঠায় কোনও উপাদান id="!"
নেই (যে তা করে !?) এবং হাইপারলিঙ্ক তাই কিছুই বোঝায় না - তাই কিছুই ঘটে না।
আপনি যে প্রশ্নটি করতে পারেন তা হ'ল, "কেন কেবলমাত্র href সম্পত্তি ত্যাগ করবেন না?"। আমি শুনেছি একটি সাধারণ প্রতিক্রিয়া হ'ল href
সম্পত্তিটি প্রয়োজনীয়, তাই এটি অ্যাঙ্কারে উপস্থিত থাকা উচিত। এটা মিথ্যা! href
সম্পত্তি আসলে একটি হাইপারলিংক হতে একটি নোঙ্গর কেবল দরকার হয়! ডাব্লু 3 থেকে এটি পড়ুন। সুতরাং, কেন কেবল স্থানধারীদের জন্য এটিকে ছেড়ে দেওয়া হচ্ছে না? ব্রাউজারগুলি উপাদানগুলির জন্য ডিফল্ট শৈলী রেন্ডার করে এবং একটি নোঙ্গর ট্যাগের ডিফল্ট স্টাইল পরিবর্তন করবে যার কাছে href সম্পত্তি নেই। পরিবর্তে, এটি নিয়মিত পাঠ্যের মতো বিবেচিত হবে। এমনকি এটি উপাদান সম্পর্কিত ব্রাউজারের আচরণকেও পরিবর্তন করে। Href সম্পত্তি ব্যতীত কোনও অ্যাঙ্কারে ঘোরাফেরা করার সময় স্থিতি বার (পর্দার নীচে) প্রদর্শিত হবে না। এটিকে হাইপারলিঙ্ক হিসাবে বিবেচনা করা হয় তা নিশ্চিত করার জন্য অ্যাঙ্কারে একটি স্থানধারক href মান ব্যবহার করা ভাল।
শৈলী এবং আচরণের পার্থক্য প্রদর্শনের জন্য এই ডেমোটি দেখুন ।
.click()
পদ্ধতি ব্যবহার করতে চান <div></div>
, এটি কার্যকর হবে না। হয় কোনও অ্যাঙ্কারে থাকতে হবে বা আপনাকে touch
ইভেন্টগুলি ব্যবহার করতে হবে ।
কোনও কিছুর জন্য href হিসাবে "#" চিহ্ন রাখার অর্থ এটি পৃথক URL নয়, একই পৃষ্ঠায় অন্য আইডি বা নাম ট্যাগকে নির্দেশ করে। উদাহরণ স্বরূপ:
<a href="#bottomOfPage">Click to go to the bottom of the page</a>
blah blah
blah blah
...
<a id="bottomOfPage"></a>
তবে, যদি কোনও আইডি বা নাম না থাকে তবে এটি "কোথায় নেই" যায় goes
এই জাতীয় আরও একটি প্রশ্ন এখানে এইচটিএমএল অ্যাঙ্কারদের 'নাম' বা 'আইডি' দিয়ে জিজ্ঞাসা করলেন ?
<a href="#">...</a>
এটি "কোথাও যাচ্ছিল না" এটি পৃষ্ঠাটি ছেড়ে দিয়ে লোড হচ্ছে site.com/#
। কীভাবে সম্ভব?
onclick
ইভেন্ট হ্যান্ডলার সেই উপাদানটির সাথে আবদ্ধ ছিল, যার ফলে একটি জাভাস্ক্রিপ্ট ফাংশন বলা হয়েছিল যা আপনাকে সেই পৃষ্ঠাতে পুনঃনির্দেশিত করেছিল।
এটি এমন একটি লিঙ্ক যা মূলত কোথাও লিঙ্ক করে (এটি কেবলমাত্র URL এ "#" যুক্ত করে)। এটি বিভিন্ন কারণে বিভিন্ন কারণে ব্যবহৃত হয়। উদাহরণস্বরূপ, আপনি যদি কিছু প্রকারের জাভাস্ক্রিপ্ট / jQuery ব্যবহার করেন এবং প্রকৃত এইচটিএমএলকে কোথাও লিঙ্ক করতে চান না।
এটি পৃষ্ঠা নোঙ্গরগুলির জন্যও ব্যবহৃত হয়, যা পৃষ্ঠার বিভিন্ন অংশে পুনর্নির্দেশের জন্য ব্যবহৃত হয়।
দুর্ভাগ্যক্রমে, এর সবচেয়ে সাধারণ ব্যবহার <a href="#">
অলস প্রোগ্রামাররা যারা ক্লিকযোগ্য অ-হাইপারলিংক জাভাস্ক্রিপ্ট-কোডেড উপাদান চান যা অ্যাঙ্করগুলির মতো আচরণ করে, তবে তাদের অ হাইপারলিংক উপাদানগুলির জন্য কোনও শ্রেণিতে স্টাইল যুক্ত করতে cursor: pointer;
বা :hover
স্টাইলগুলি আর্কড করা যায় না , এবং অতিরিক্তভাবে হয় খুব সেট করতে অলস href
করার javascript:void(0);
।
<a href="#" onclick="some_function();">
এটির সাথে সমস্যাটি হ'ল একটি বা অন্য অনিবার্যভাবে জাভাস্ক্রিপ্ট ত্রুটির সাথে শেষ হয় এবং অনক্লিক জাভাস্ক্রিপ্ট ত্রুটিযুক্ত একটি অ্যাঙ্কর সর্বদা এর অনুসরণ করে শেষ হয় href
। সাধারণত এই পর্যন্ত পৃষ্ঠার উপরের একটি বিরক্তিকর লাফ হচ্ছে শেষ, কিন্তু ব্যবহার সাইট ক্ষেত্রে <base>
, <a href="#">
যেমন পরিচালিত হয় <a href="[base href]/#">
, একটি অপ্রত্যাশিত গৌণ ফলে। যদি কোনও লগযোগ্য ত্রুটি উত্পন্ন হচ্ছে, আপনি যদি অবিরাম লগগুলি সক্ষম না করেন তবে আপনি সেগুলিকে পরবর্তী ক্ষেত্রে দেখতে পাবেন না।
একটি নোঙ্গর উপাদান যদি হয় একটি অ-নোঙ্গর হিসাবে ব্যবহার এটা করা উচিত তার আছে href
সেট javascript:void(0);
অনুরোধে জন্য সুতনু অবনতি।
আমি মাত্র দু'দিন অপ্রয়োজনীয় পৃষ্ঠাটি পুনর্নির্দেশের ডিবাগ করে নষ্ট করেছিলাম যা কেবল পৃষ্ঠাটি সতেজ করা উচিত ছিল এবং শেষ পর্যন্ত এটির ক্লিকের ইভেন্টের উত্থাপনের কোনও ক্রিয়াকলাপে ট্র্যাক করে আনা হয়েছিল <a href="#">
। এটির #
সাথে প্রতিস্থাপন javascript:void(0);
করা।
আমি সোমবার প্রথম জিনিসটি হ'ল সমস্ত দৃষ্টান্তের প্রকল্পটি শুদ্ধ করে দিচ্ছি <a href="#">
।
<base>
সত্যই এটির জন্য একটি বড় পার্থক্য তৈরি করুন #
। নির্দেশ করার জন্য ধন্যবাদ!
আনঅর্ডার করা তালিকাগুলি প্রায়শই এগুলি মেনু হিসাবে ব্যবহারের অভিপ্রায় তৈরি করা হয় তবে li
তালিকার আইটেমটি পাঠ্য। তালিকার li
আইটেমটি পাঠ্য হওয়ায় মাউস পয়েন্টারটি তীর হবে না তবে একটি "আমি কার্সার" হবে। যখন কিছু ক্লিকযোগ্য হয় তখন ব্যবহারকারীরা মাউস পয়েন্টারটির জন্য পয়েন্টিং আঙুলটি দেখতে অভ্যস্ত। ট্যাগের a
অভ্যন্তরে অ্যাঙ্কর ট্যাগ ব্যবহারের li
ফলে মাউস পয়েন্টারটি একটি আঙুলের দিকে পরিবর্তিত হয়। মেনু হিসাবে তালিকাটি ব্যবহারের জন্য পয়েন্টিং আঙুলটি আরও অনেক ভাল।
<ul id="menu">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a></li>
</ul>
যদি তালিকাটি মেনুটির জন্য ব্যবহার করা হচ্ছে, এবং কোনও লিঙ্কের প্রয়োজন নেই, তবে একটি URL নির্দিষ্ট করার দরকার নেই। তবে সমস্যাটি হ'ল যদি আপনি href
বৈশিষ্ট্যটি ছেড়ে যান তবে <a>
ট্যাগের পাঠ্যটিকে পাঠ্য হিসাবে দেখা হয় এবং তাই মাউস পয়েন্টারটি আই-কার্সারে ফিরে আসে। আই-কার্সারটি ব্যবহারকারীকে ভাবতে পারে যে মেনু আইটেমটি ক্লিকযোগ্য নয়। অতএব, আপনার এখনও একটি প্রয়োজন href
, তবে আপনার কোথাও কোনও লিঙ্কের দরকার নেই।
আপনি মেনু তালিকার জন্য প্রচুর div
বা p
ট্যাগ ব্যবহার করতে পারেন তবে মাউস পয়েন্টারটি তাদের জন্য আই-কার্সার হতে পারে।
আপনি মেনু তালিকার জন্য একে অপরের উপরে সজ্জিত প্রচুর বোতাম ব্যবহার করতে পারেন, তবে তালিকাটি পছন্দনীয় বলে মনে হয়। এবং সম্ভবত এই কারণেই href="#"
পয়েন্টগুলি কোথাও তালিকা ট্যাগগুলির ভিতরে অ্যাঙ্কর ট্যাগগুলিতে ব্যবহৃত হয়।
আপনি সিএসএসে পয়েন্টার শৈলী সেট করতে পারেন, সুতরাং এটি অন্য বিকল্প। আর href="#"
কোথাও কিছু স্টাইলিং সেট করার অলস উপায় হতে পারে।
খালি লিঙ্কটির জন্য href = "#" ব্যবহার করার ক্ষেত্রে সমস্যাটি হ'ল এটি আপনাকে পৃষ্ঠার শীর্ষে নিয়ে যাবে যা পছন্দসই পদক্ষেপ নয়। এটি এড়াতে, পুরানো ব্রাউজারগুলির জন্য বা নন-এইচটিএমএল 5 ডক্টিপ ব্যবহার করুন
<a href="javascript:void(0)">Goes Nowhere</a>
আমি যতদূর জানি এটি সাধারণত লিঙ্কগুলির জন্য একটি স্থানধারক যার সাথে কিছু জাভাস্ক্রিপ্ট সংযুক্ত থাকে। লিঙ্কটির মূল পয়েন্টটি জাভাস্ক্রিপ্ট কোড সম্পাদন করে পরিবেশিত হয়; জেএস সমর্থন সহ ব্রাউজারগুলি তারপরে আসল লিঙ্ক লক্ষ্যটিকে উপেক্ষা করে। যদি ব্রাউজারটি জেএসকে সমর্থন না করে তবে হ্যাশ চিহ্নটি মূলত লিঙ্কটিকে একটি নো অপেমে পরিণত করে। আরও দেখুন বিচক্ষণ জাভাস্ক্রিপ্ট ।
অন্যান্য উত্তরগুলির মধ্যে কিছু উল্লেখ করেছে যে, a
উপাদানটির একটি href
বৈশিষ্ট্য প্রয়োজন এবং এটি #
স্থানধারক হিসাবে ব্যবহৃত হয়, তবে এটি একটি .তিহাসিক নিদর্শনও।
থেকে মজিলা ডেভেলপার নেটওয়ার্ক :
সূরা
হাইপারটেক্সট উত্স লিঙ্কটি সংজ্ঞায়িত অ্যাঙ্করগুলির জন্য এটি একক প্রয়োজনীয় বৈশিষ্ট্য ছিল, তবে এইচটিএমএল 5 এ আর প্রয়োজন হয় না। এই বৈশিষ্ট্যটি ছাড়াই স্থানধারক লিঙ্ক তৈরি করে। Href বৈশিষ্ট্যটি লিঙ্ক লক্ষ্যটিকে ইঙ্গিত করে, হয় একটি URL বা একটি URL খন্ড। একটি ইউআরএল টুকরা হ্যাশ চিহ্ন (#) এর আগে একটি নাম, যা বর্তমান নথির মধ্যে একটি অভ্যন্তরীণ লক্ষ্য অবস্থান (একটি আইডি) নির্দিষ্ট করে।
এছাড়াও, HTML5 এর প্রতি বৈশিষ্ট :
যদি কোনও উপাদানের কোনও href বৈশিষ্ট্য না থাকে, তবে উপাদানটি কোনও স্থানধারককে উপস্থাপন করে যেখানে লিঙ্কটি অন্যথায় রাখা হতে পারে, যদি এটি প্রাসঙ্গিক হত, কেবলমাত্র উপাদানটির বিষয়বস্তু নিয়ে।
Href বৈশিষ্ট্যটি একটি লিঙ্কের সংস্থানটির URL সংজ্ঞা দেয়। যদি অ্যাঙ্কর ট্যাগটিতে href ট্যাগ না থাকে তবে এটি হাইপারলিঙ্ক হয়ে যাবে না। Href বৈশিষ্ট্যের নিম্নলিখিত মান রয়েছে:
1. Absolute path: move to another site like href="http://www.google.com"
2. Relative path: move to another page within the site like herf ="defaultpage.aspx"
3. Move to an element with a specified id within the page like href="#bottom"
4. href="javascript:void(0)", it does not move anywhere.
5. href="#" , it does not move anywhere but scroll on the top of the current page.
6. href= "" , it will load the current page but some browsers causes forbidden errors.
Note: When we do not need to specified any url inside a anchor tag then use
<a href="javascript:void(0)">Test1</a>