Href = "#" কী এবং কেন এটি ব্যবহৃত হয়?


363

অনেক ওয়েবসাইটে আমি লিঙ্কগুলি দেখতে পাচ্ছি href="#"। এর মানে কী? এটা কি কাজে লাগে?

উত্তর:


344

হাইপারলিঙ্ক সম্পর্কে:

অ্যাঙ্কর ট্যাগগুলির প্রধান ব্যবহার - <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 মান ব্যবহার করা ভাল।

শৈলী এবং আচরণের পার্থক্য প্রদর্শনের জন্য এই ডেমোটি দেখুন


1
সম্পূর্ণ উত্তর। তবে, আপনার উত্তরে টেমপ্লেট পূর্বরূপটির অর্থ কী ?
ওভাররেঞ্জচেঞ্জ

3
@ সার্বভৌম এক্সচেঞ্জ উদাহরণস্বরূপ, এই পৃষ্ঠাটি এবং এর লিঙ্কগুলি দেখুন: ironsummitmedia.github.io/startbootstrap-creative Just HTML পৃষ্ঠাগুলি যা সিএসএস / এইচটিএমএল, ওয়ার্ডপ্রেস থিম ইত্যাদির একটি সেট প্রদর্শন করতে বোঝানো হয়েছে, তবে আসল পৃষ্ঠা নয়, সুতরাং লিঙ্কগুলি কোথাও যাওয়ার দরকার নেই।
এম59

1
@ ইয়ুং হ্যাশ পরিবর্তন করা (এটি # এর পরে থাকা url এর অংশ) সার্ভারটি কল করে না। আপনি জাভাস্ক্রিপ্ট সহ পৃষ্ঠাটি পরিবর্তন করবেন। এই বিষয়ে অনেক কিছুই বলা যায় এবং এটি এই পোস্টের সুযোগের বাইরে।
m59

2
এছাড়াও, এলোমেলো টিডিবিট, অ্যান্ড্রয়েড ব্রাউজারগুলি (ব্রাউজার, ক্রোম ইত্যাদি) অ্যাঙ্কর ট্যাগ ব্যতীত ক্লিক ইভেন্টগুলি গ্রহণ করবে না। সুতরাং বলুন যে আপনি একটিতে jQuery এর .click()পদ্ধতি ব্যবহার করতে চান <div></div>, এটি কার্যকর হবে না। হয় কোনও অ্যাঙ্কারে থাকতে হবে বা আপনাকে touchইভেন্টগুলি ব্যবহার করতে হবে ।
Steely

1
@ কিহারার আমি ইতিবাচক নই, তবে এটি এমন কারণ হওয়া উচিত যে একটি খালি "#" কোনও কিছুর উল্লেখ করে না, তাই এটিকে ছেড়ে দেওয়ার মতোই, এবং এটিকে ছেড়ে দেওয়া কেবল পৃষ্ঠাটিকে বোঝায় এবং পৃষ্ঠাগুলি শুরু হয় অন্যথায় বলা না হলে শীর্ষ। অন্য কথায়, সম্ভবত এটি "শীর্ষে স্ক্রোল" এর অর্থ নয়, এর অর্থ কিছু নেই অর্থাত্ "এই পৃষ্ঠায় যান", যা পৃষ্ঠার শীর্ষে যাওয়ার অর্থ হয়।
m59

85

কোনও কিছুর জন্য href হিসাবে "#" চিহ্ন রাখার অর্থ এটি পৃথক URL নয়, একই পৃষ্ঠায় অন্য আইডি বা নাম ট্যাগকে নির্দেশ করে। উদাহরণ স্বরূপ:

<a href="#bottomOfPage">Click to go to the bottom of the page</a>
blah blah
blah blah
...
<a id="bottomOfPage"></a>

তবে, যদি কোনও আইডি বা নাম না থাকে তবে এটি "কোথায় নেই" যায় goes

এই জাতীয় আরও একটি প্রশ্ন এখানে এইচটিএমএল অ্যাঙ্কারদের 'নাম' বা 'আইডি' দিয়ে জিজ্ঞাসা করলেন ?


1
আইডি সহ একটি উপাদান - এটি নামকরণকৃত অ্যাঙ্কর হতে হবে না (এবং বাস্তবে নামযুক্ত অ্যাঙ্করগুলি কিছু সময়ের জন্য অবচয় করা হয়েছে)।
ওদেড

2
আমি এখানে এসেছি কারণ <a href="#">...</a>এটি "কোথাও যাচ্ছিল না" এটি পৃষ্ঠাটি ছেড়ে দিয়ে লোড হচ্ছে site.com/#। কীভাবে সম্ভব?
doug65536

7
@ doug65536 সম্ভবত এটি কারণ হ'ল কোনও onclickইভেন্ট হ্যান্ডলার সেই উপাদানটির সাথে আবদ্ধ ছিল, যার ফলে একটি জাভাস্ক্রিপ্ট ফাংশন বলা হয়েছিল যা আপনাকে সেই পৃষ্ঠাতে পুনঃনির্দেশিত করেছিল।
jtate

32

এটি এমন একটি লিঙ্ক যা মূলত কোথাও লিঙ্ক করে (এটি কেবলমাত্র URL এ "#" যুক্ত করে)। এটি বিভিন্ন কারণে বিভিন্ন কারণে ব্যবহৃত হয়। উদাহরণস্বরূপ, আপনি যদি কিছু প্রকারের জাভাস্ক্রিপ্ট / jQuery ব্যবহার করেন এবং প্রকৃত এইচটিএমএলকে কোথাও লিঙ্ক করতে চান না।

এটি পৃষ্ঠা নোঙ্গরগুলির জন্যও ব্যবহৃত হয়, যা পৃষ্ঠার বিভিন্ন অংশে পুনর্নির্দেশের জন্য ব্যবহৃত হয়।


40
কেবল যোগ করার জন্য, এটি ঠিক কোথাও কোনও লিঙ্ক নয় ... একটি স্ক্রোলিং পৃষ্ঠায় এটি আপনাকে শীর্ষে স্বয়ংক্রিয়ভাবে স্ক্রোল করবে।
মিসকো

26

দুর্ভাগ্যক্রমে, এর সবচেয়ে সাধারণ ব্যবহার <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="#">


4
"যদি নোঙ্গর উপাদানটি নন-অ্যাঙ্কর হিসাবে ব্যবহার করা হয় তবে এটির জেভাস্ক্রিপ্টে হেরেফ সেট করা উচিত: অকার্যকর (0); করুণাময় অবক্ষয়ের জন্য" " [উদ্ধৃতি আবশ্যক]
ভিটো দে তুলিও

ওয়াই, এর সাথে এবং ছাড়া <base>সত্যই এটির জন্য একটি বড় পার্থক্য তৈরি করুন #। নির্দেশ করার জন্য ধন্যবাদ!
লিওন - হ্যান লি

আমি মাত্র দু'দিন অপ্রয়োজনীয় পৃষ্ঠাটি পুনর্নির্দেশের ডিবাগ করতে নষ্ট করেছিলাম যা কেবল পৃষ্ঠাটি সতেজ করা উচিত ছিল এবং অবশেষে এটি একটি <a href="#"> এর ক্লিক ইভেন্ট উত্থাপনকারী কোনও ক্রিয়াকলাপে ট্র্যাক করে। জাভাস্ক্রিপ্ট দিয়ে # টি প্রতিস্থাপন: অকার্যকর (0); ঠিক কর. - আমি একই জিনিসটি করেছি এবং আমার সমস্যাও সমাধান করেছি।
লিয়াং

23

আনঅর্ডার করা তালিকাগুলি প্রায়শই এগুলি মেনু হিসাবে ব্যবহারের অভিপ্রায় তৈরি করা হয় তবে 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="#"কোথাও কিছু স্টাইলিং সেট করার অলস উপায় হতে পারে।


14

খালি লিঙ্কটির জন্য href = "#" ব্যবহার করার ক্ষেত্রে সমস্যাটি হ'ল এটি আপনাকে পৃষ্ঠার শীর্ষে নিয়ে যাবে যা পছন্দসই পদক্ষেপ নয়। এটি এড়াতে, পুরানো ব্রাউজারগুলির জন্য বা নন-এইচটিএমএল 5 ডক্টিপ ব্যবহার করুন

<a href="javascript:void(0)">Goes Nowhere</a>

2
আমি এই সমাধানটি একটি দৃশ্যের জন্য বিশেষভাবে দরকারী বলে মনে করেছি: আমার অ্যাপ্লিকেশনটিতে, href = '"" লগআউট (লগইন পৃষ্ঠায় আনতে) কার্যকারিতা বাস্তবায়নের জন্য ব্যবহৃত হয়। যদি আমি অন্য উদ্দেশ্যে href = "#" ব্যবহার করি তবে কিছু সময় এটি আমাকে লগইন পৃষ্ঠায় ফিরিয়ে আনবে। আমি href = "#" কে href = "জাভাস্ক্রিপ্ট: অকার্যকর (0)" এ পরিবর্তন করার পরে, সমস্যার সমাধান হয়েছে।
লিয়াং

13

আমি যতদূর জানি এটি সাধারণত লিঙ্কগুলির জন্য একটি স্থানধারক যার সাথে কিছু জাভাস্ক্রিপ্ট সংযুক্ত থাকে। লিঙ্কটির মূল পয়েন্টটি জাভাস্ক্রিপ্ট কোড সম্পাদন করে পরিবেশিত হয়; জেএস সমর্থন সহ ব্রাউজারগুলি তারপরে আসল লিঙ্ক লক্ষ্যটিকে উপেক্ষা করে। যদি ব্রাউজারটি জেএসকে সমর্থন না করে তবে হ্যাশ চিহ্নটি মূলত লিঙ্কটিকে একটি নো অপেমে পরিণত করে। আরও দেখুন বিচক্ষণ জাভাস্ক্রিপ্ট


13

অন্যান্য উত্তরগুলির মধ্যে কিছু উল্লেখ করেছে যে, aউপাদানটির একটি hrefবৈশিষ্ট্য প্রয়োজন এবং এটি #স্থানধারক হিসাবে ব্যবহৃত হয়, তবে এটি একটি .তিহাসিক নিদর্শনও।

থেকে মজিলা ডেভেলপার নেটওয়ার্ক :

সূরা

হাইপারটেক্সট উত্স লিঙ্কটি সংজ্ঞায়িত অ্যাঙ্করগুলির জন্য এটি একক প্রয়োজনীয় বৈশিষ্ট্য ছিল, তবে এইচটিএমএল 5 এ আর প্রয়োজন হয় না। এই বৈশিষ্ট্যটি ছাড়াই স্থানধারক লিঙ্ক তৈরি করে। Href বৈশিষ্ট্যটি লিঙ্ক লক্ষ্যটিকে ইঙ্গিত করে, হয় একটি URL বা একটি URL খন্ড। একটি ইউআরএল টুকরা হ্যাশ চিহ্ন (#) এর আগে একটি নাম, যা বর্তমান নথির মধ্যে একটি অভ্যন্তরীণ লক্ষ্য অবস্থান (একটি আইডি) নির্দিষ্ট করে।

এছাড়াও, HTML5 এর প্রতি বৈশিষ্ট :

যদি কোনও উপাদানের কোনও href বৈশিষ্ট্য না থাকে, তবে উপাদানটি কোনও স্থানধারককে উপস্থাপন করে যেখানে লিঙ্কটি অন্যথায় রাখা হতে পারে, যদি এটি প্রাসঙ্গিক হত, কেবলমাত্র উপাদানটির বিষয়বস্তু নিয়ে।


1

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>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.