পৃষ্ঠার শীর্ষে জাম্পিং থেকে কোনও '#' লিঙ্কে ক্লিক করা কীভাবে প্রতিরোধ করবেন?

Question

আমি বর্তমানে <a>ক্লিক ইভেন্টগুলি ইত্যাদির মতো জিনিস শুরু করতে jQuery এর সাথে ট্যাগগুলি ব্যবহার করছি etc.

উদাহরণটি হ'ল <a href="#" class="someclass">Text</a>

তবে আমি ঘৃণা করি যে কীভাবে '#' পৃষ্ঠাটিকে পৃষ্ঠার শীর্ষে উঠতে পারে makes এর পরিবর্তে আমি কী করতে পারি?

Comments

সদৃশ stackoverflow.com/questions/720970/jquery-hyperlinks-href-value/...

— ছিল Bogdan Constantinescu

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

— ড্যানিয়েল প্রাইডেন

“বোকা যেমন বোকা তেমনি” আমরা সবাই এর আগে সেখানে ছিলাম :)

— তাকেশিন

Answer 1

JQuery এ, আপনি যখন ক্লিক ইভেন্টটি পরিচালনা করেন, স্বাভাবিক উপায়ে প্রতিক্রিয়া থেকে লিঙ্কটি থামাতে মিথ্যা প্রত্যাবর্তন করুনডিফল্ট ক্রিয়াটি, যা hrefএট্রিবিউটটি ঘুরে দেখা যায় , তা ঘটানো থেকে বিরত রাখুন (প্রতি PoweRoy এর মন্তব্য এবং এরিকের উত্তর ):

$('a.someclass').click(function(e)
{
    // Special stuff to do when this link is clicked...

    // Cancel the default action
    e.preventDefault();
});

Comments

@ প্রণয়: ওপি উল্লেখ করেছে যে তিনি এই লিঙ্কগুলির সাথে কাজ করতে jQuery ব্যবহার করছেন।

— BoltClock

মিথ্যা প্রত্যাবর্তনের পরিবর্তে একটি ইভেন্ট করুন preপ্রিভেন্টডাফল্ট ()। আপনার কোডটি পড়বে এমন লোকদের পক্ষে এটি আরও স্পষ্ট।

— আরভিডিকে

@ পাওয়েরয়: পেয়েছেন আমি সম্পাদনাটি তৈরি করেছি এবং নতুন কিছু শিখেছি :)

— বোল্টক্লক

@ বল্টক্লক ওপিকে অ্যাঙ্করগুলির পরিবর্তে ক্লিক ইভেন্টগুলি পরিচালনা করতে বোতামগুলি ব্যবহার করা উচিত। আপনার উত্তর প্রশংসনীয় দরকারী, কিন্তু ক্ষেত্রে সূরা কোথাও পয়েন্ট এবং আপনার পুনর্নির্দেশ প্রয়োজন হবে না যখন মুহূর্তে । ক্রিয়াকলাপের ডিফল্ট আচরণের কোনও প্রয়োজনই রোধ করা এক ধরণের পরামর্শের মতো: ছুরিটি ধরুন, ফলকটি ধরুন এবং হ্যান্ডেলটি ব্যবহার করে নখকে হাতুড়ি করুন :) কাজের জন্য একটি সঠিক সরঞ্জাম নিন!

— তাকেশিন

যদি jquery:$('a[href=#]').click(function(e) { e.preventDefault(); });

— স্নুফকিন

Answer 2

সুতরাং এটি পুরানো তবে ... কেবলমাত্র যদি কেউ অনুসন্ধানে এটি খুঁজে পায়।

কেবল "#/"পরিবর্তে ব্যবহার করুন "#"এবং পৃষ্ঠা লাফ দেবে না।

Comments

ঠিক আমার যা প্রয়োজন! এমনকি আপনার মন্তব্যের এক বছর পরেও এটি আমার পক্ষে সহায়ক হয়েছিল তাই আপনাকে ক্রিসকে ধন্যবাদ জানায়

— জ্যাক

এটি কাজ করে কারণ এটি অ্যাঙ্কর নামের নেভিগেট করে /, #/এর কোনও অর্থ নেই বলে নয় । আপনি একই জিনিসটি #whateveryouwantএটির সাথে করতে পারেন এবং এটি শীর্ষে এক লাফ আটকাতে পারে

— স্ল্যাং করুন

এটি সেরা উত্তর হওয়া প্রয়োজন। আপনি Tnank।

— গিলবার্তো সানচেজ

@ স্ল্যাং, যদিও আপনি ঠিক বলেছেন, এবং এটি কেবল নিটপিকিং but তবে আমি "# /" ব্যবহারের পরিবর্তে "# /" ব্যবহার করতে পছন্দ করব কারণ "# /" বেশ সাধারণভাবে ব্যবহৃত হয় এবং এইভাবে উদ্দেশ্যগুলি প্রকাশ করে (ক্লিন কোড)। এটি এখনও উত্তরের সাথে যুক্ত হতে পারে।

— জববার্ট

সাবধান - এটি ব্রাউজারের ইতিহাসে একটি রেকর্ড তৈরি করে তাই ব্যবহারকারীরা যে কোনও লিঙ্কে ক্লিক করার পরে #/বা অন্য কোনও উদাহরণে ক্লিক করার পরে এটি কী করবে তা ব্যবহারকারীরা মনে করে যা তা করবে না #whatever।

— ড্যারেন সুইভিনে

Answer 3

আপনি এমনকি এটি ঠিক এইভাবে লিখতে পারেন:

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

আমি নিশ্চিত না যে এটি একটি ভাল উপায় তবে এটি একটি উপায় :)

Comments

প্রাক-এইচটিএমএল 4 এর জন্য এই পদ্ধতিটি দুর্দান্ত ছিল তবে আজ এটি খুব খারাপ অনুশীলন হিসাবে এটি "নতুন ট্যাবে ওপেন লিংক" এর মতো অনেকগুলি নেভিগেশন ক্রিয়াকে ভেঙে দেয়।

— স্টিভ-ও

আপনি হয়ত ঠিক বলেছেন তবে .. এই ক্ষেত্রে এটি গুরুত্বপূর্ণ নয় কারণ তিনি একটি অনক্লিক ইভেন্ট দিচ্ছেন তাই নতুন ট্যাবে উন্মুক্ত লিঙ্কটি কোনওভাবেই কাজ করবে না ...

— লোক স্ক্যাললার

শর্টকাট href='javascript:;'তবে সাবধান থাকুন এটি উইন্ডোকে ট্রিগার করে beপূর্ব আইই-তে ইভেন্টটি ডাউনলোড করুন

— মিহির

এটি তার নিজের কাজটি ভাঙ্গতে পারে? কারণ আমি যদি স্লাইডগুলি রেন্ডার করতে আমার ফানকটি আর ট্রিগার করি না।

— ব্যবহারকারী3806549

Answer 4

সমাধান # 1: (সমতল)

<a href="#!" class="someclass">Text</a>

---

সমাধান # 2: (প্রয়োজনীয় javascript)

<a href="javascript:void(0);" class="someclass">Text</a>

---

সমাধান # 3: (প্রয়োজনীয় jQuery)

<a href="#" class="someclass">Text</a>
<script>
$('a.someclass').click(function(e) {
    e.preventDefault();
});
</script>

Comments

প্রথম সমাধানটি নিখুঁত। সংক্ষিপ্ত, পরিষ্কার এবং সহজ। এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। ধন্যবাদ!

— অলমোস্টপিট

নম্বর 1 একটি দুর্দান্ত সমাধান। ধন্যবাদ!

— ব্রেন্টন স্কট

Answer 5

আপনি event.preventDefault()এড়াতে ব্যবহার করতে পারেন । এখানে আরও পড়ুন: http://api.jquery.com/event.preventDefault/ ।

Answer 6

আপনার <input type="button" />পরিবর্তে কেবল ব্যবহার করুন <a>এবং এটি চাইলে লিংকের মতো দেখতে স্টাইল করতে সিএসএস ব্যবহার করুন।

বাটনগুলি ক্লিক করার জন্য বিশেষভাবে তৈরি করা হয় এবং তাদের কোনও href বৈশিষ্ট্যের প্রয়োজন হয় না।

সর্বোত্তম উপায় হ'ল বোতামটি তৈরি করার জন্য অনলোড ক্রিয়াটি ব্যবহার করা এবং জাভাস্ক্রিপ্টের মাধ্যমে আপনার যেখানে প্রয়োজন সেখানে সংযোজন করা, তাই জাভাস্ক্রিপ্ট অক্ষম করা থাকলে তারা এগুলি কিছুতেই প্রদর্শন করবে না এবং ব্যবহারকারীকে বিভ্রান্ত করবে না।

আপনি যখন ব্যবহার href="#"করবেন তখন একই স্থানের দিকে নির্দেশ করে বিভিন্ন সংখ্যক লিঙ্ক পাবেন, যা এজেন্ট জাভাস্ক্রিপ্ট সমর্থন না করলে কাজ করবে না।

Comments

@kingjeffrey তবে কিছুই করা এখনও নেভিগেট করার চেয়ে ভাল #।

— রবার্ট

Answer 7

যদি আপনি কোনও অ্যাঙ্কর ব্যবহার করতে চান তবে প্রস্তাবিত অন্যান্য উত্তরগুলির মতো আপনি http://api.jquery.com/event.preventDefault/ ব্যবহার করতে পারেন ।

আপনি স্প্যানের মতো অন্য যে কোনও উপাদান ব্যবহার করতে পারেন এবং ক্লিক ইভেন্টটি এতে সংযুক্ত করতে পারেন।

$("span.clickable").click(function(){
alert('Yeah I was clicked');
});

Answer 8

আপনি #0href হিসাবে ব্যবহার করতে পারেন , যেহেতু 0একটি আইডি হিসাবে অনুমোদিত নয়, পৃষ্ঠাটি লাফ দেবে না।

<a href="#0" class="someclass">Text</a>

Answer 9

$('a[href="#"]').click(function(e) {e.preventDefault(); });

Comments

আপনি একটি সংক্ষিপ্ত ব্যাখ্যা যোগ করতে পারেন?

— জেএফ মেয়ার

আমার কাছে দেখে মনে হচ্ছে তিনি কোনও অ্যাঙ্করে একটি ক্লিক হ্যান্ডলার যুক্ত করছেন যার সাথে এটির সাথে একটি # href যুক্ত রয়েছে। এইভাবে, আপনার কাছে ইতিমধ্যে স্থানে থাকা সমস্ত ক্লিক হ্যান্ডলারের সন্ধান এবং তাদের মধ্যে e.preventDefault () যুক্ত করতে হবে না।

— ম্যানি 5556

Answer 10

শুধু ব্যবহার

<a href="javascript:;" class="someclass">Text</a>

jQuery

$('.someclass').click(function(e) { alert("action here"); }

Answer 11

যদি উপাদানটির কোনও অর্থবহ হারেফের মান না থাকে তবে এটি আসলে কোনও লিঙ্ক নয়, তবে পরিবর্তে অন্য কোনও উপাদান ব্যবহার করবেন না কেন?

নেওথরের পরামর্শ অনুসারে, একটি স্প্যান ঠিক ততটাই উপযুক্ত এবং যদি সঠিকভাবে স্টাইল করা হয় তবে ক্লিক করা যায় এমন আইটেম হিসাবে এটি দৃশ্যত স্পষ্ট হবে। এমনকি ব্যবহারকারীর মাউসটি তার উপর দিয়ে চলে যাওয়ার সাথে সাথে হাতিটিকে 'আলোকিত' করতে আপনি একটি হোভার ইভেন্ট সংযুক্ত করতে পারেন।

যাইহোক, এটি বলার পরে, আপনি আপনার সাইটের নকশাটি নতুন করে ভাবতে চাইতে পারেন যাতে এটি জাভাস্ক্রিপ্ট ব্যতীত কাজ করে তবে উপলভ্য হলে জাভাস্ক্রিপ্ট দ্বারা বর্ধিত হয়।

Answer 12

Href = "#" সহ লিঙ্কগুলি প্রায় সবসময় একটি বোতামের উপাদান দিয়ে প্রতিস্থাপন করা উচিত:

<button class="someclass">Text</button>

Href = "#" এর সাথে লিঙ্কগুলি ব্যবহার করাও একটি অ্যাক্সেসযোগ্যতার উদ্বেগ কারণ এই লিঙ্কগুলি স্ক্রিন পাঠকদের কাছে দৃশ্যমান হবে, যা "লিঙ্ক - পাঠ্য" পড়বে তবে ব্যবহারকারী ক্লিক করলে এটি কোথাও যাবে না।

Answer 13

আপনি কেবল কোনও হেরেফ সম্পত্তি ছাড়াই একটি অ্যাঙ্কর ট্যাগ পাস করতে পারেন এবং প্রয়োজনীয় ক্রিয়াটি করতে jQuery ব্যবহার করতে পারেন:

<a class="foo">bar</a>

Comments

আমি সাধারণত এই পদ্ধতির প্রস্তাব দিই না, কারণ কোনও জাল অক্ষম থাকলে কোনও ফলব্যাক অ্যাকশন নেই। আপনি ইতিমধ্যে href সেট করে #দিয়েছি, আমি ধরে নিয়েছি এটি আপনার পক্ষে কোনও উদ্বেগ নয় এবং সুতরাং এটি আপনার সমাধান মেটাতে সহজতম উপায় হওয়ায় সম্ভবত এই সমাধানটি সরবরাহ করে।

— কিংজেফ্রে

a:linkসিএসএস নির্বাচনকারীরা এই অ্যাঙ্কর ট্যাগকে লক্ষ্যবস্তু করবেন না।

— বোল্টক্লক

বোল্টক্লক, এটি সত্য। কিন্তু st4ck0v3rfl0w এরকম কোনও প্রয়োজনীয়তা নির্দেশ করে নি।

— কিংজেফ্রে

পাশাপাশি একটি <ডিভ> ব্যবহার করতে পারেন। আমি বিশ্বাস করি <a> রক্ষণাবেক্ষণের বিষয়টি হ'ল এটি স্টাইল রাখা, যা ইতিমধ্যে নিয়মিত <a> এর দ্বারা সংজ্ঞায়িত। কোনও href না থাকলে এটি অন্য <a> এর মতো সনাক্ত এবং স্টাইল করা হবে না।

— মার্সএন্ডব্যাক

Answer 14

আমি ব্যবহার করেছি:

<a href="javascript://nop/" class="someClass">Text</a>

Answer 15

#/কৌতুক কাজ করে, কিন্তু ব্রাউজারে একটি ইতিহাস ঘটনা যোগ করা হয়েছে। সুতরাং, পিছনে ক্লিক করা ব্যবহারকারীর পক্ষে এটি যেমন আশা করা / আশা করা যায় তেমন কাজ করে না।

$('body').click('a[href="#"]', function(e) {e.preventDefault() }); এটি যেভাবে আমি গিয়েছিলাম, এটি ইতিমধ্যে বিদ্যমান সামগ্রীতে কাজ করে এবং লোডের পরে কোনও উপাদান ডিওমে যুক্ত হয়।

বিশেষত, একটি .btn-group(রেফারেন্স) এর ভিতরে একটি বুটস্ট্র্যাপ ড্রপডাউন-মেনুতে আমার এটি করা দরকার ছিল , তাই আমি এটি করেছি:

$('body').click('.dropdown-menu li a[href="#"]', function(e) {e.preventDefault() });

এইভাবে এটি লক্ষ্যবস্তু হয়েছিল এবং পৃষ্ঠার অন্য কোনও কিছুর উপর প্রভাব ফেলেনি।

Answer 16

আমি সবসময় ব্যবহার করেছি:

<a href="#?">Some text</a>

পৃষ্ঠা জাম্প প্রতিরোধ করার চেষ্টা করার সময়। এটি সেরা কিনা তা নিশ্চিত নন, তবে এটি বেশ কয়েক বছর ধরে ভালভাবে কাজ করছে বলে মনে হয়।

Answer 17

কোনও জাভাস্ক্রিপ্ট ছাড়াই পৃষ্ঠায় শীর্ষে উঠে আসা থেকে রোধ করার জন্য 4 টি অনুরূপ উপায় রয়েছে:

বিকল্প 1:

<a href="#0">Link</a>

বিকল্প 2:

<a href="#!">Link</a>

বিকল্প 3:

<a href="#/">Link</a>

বিকল্প 4 ( প্রস্তাবিত নয় ):

<a href="javascript:void(0);">Link</a>

event.preventDefault()আপনি যদি jQuery এ ক্লিক ইভেন্টটি হস্তান্তর করছেন তবে এটি ব্যবহার করা ভাল ।

Comments

যদিও এই কোডটি প্রশ্নের উত্তর দিতে পারে, কীভাবে এবং / বা কেন এটি সমস্যার সমাধান করে তা সম্পর্কিত অতিরিক্ত প্রসঙ্গ সরবরাহ করলে উত্তরের দীর্ঘমেয়াদী মান উন্নত হবে।

— এ সুলিমান

Answer 18

আপনি আপনার jquery প্রক্রিয়া করার পরে মিথ্যা ফিরে আসতে পারেন।

যেমন।

$(".clickableAnchor").live(
    "click",
    function(){
        //your code
        return false; //<- prevents redirect to href address
    }
);

Comments

এটি এবং লাইভ পদ্ধতি উভয়ই হ্রাস করা হয়েছে এবং আর ব্যবহার করা উচিত নয়।

— কোয়ান্টিন

Answer 19

আমি এই জাতীয় কিছু ব্যবহার:

<a href="#null" class="someclass">Text</a>

Answer 20

পৃষ্ঠাটি জাম্পিং থেকে রোধ করতে, আপনাকে কল করার e.stopPropagation();পরে কল করতে হবে e.preventDefault();:

stopPropagationইভেন্টটি ডিওএম গাছের উপরে উঠতে বাধা দেয়। এখানে আরও তথ্য: https://api.jquery.com/event.stoppropagation/

Comments

আপনি কি দয়া করে আমার এইচটিএমএল এ পুরো কোডটি পেস্ট করতে পারবেন? আমি জুরব ফাউন্ডেশন 5.5.3 ব্যবহার করছি।

— জুলি এস

Answer 21

আপনি যদি পৃষ্ঠাটিতে ঝাঁপ না দিয়ে একই পৃষ্ঠায় কোনও অ্যাঙ্কর বিভাগে মাইগ্রেট করতে চান:

উদাহরণস্বরূপ "#" এর পরিবর্তে "# /" ব্যবহার করুন

<a href="#/home">Home</a>
<a href="#/about">About</a>
<a href="#/contact">contact</a> page will not jump up on click..

Answer 22

#সেই আইডি সহ উপাদানটির পৃষ্ঠার ফোকাস সেট করার পরে কিছু যুক্ত করা । সবচেয়ে সহজ সমাধানটি হ'ল আপনি #/jQuery ব্যবহার করছেন এমন কি। তবে আপনি যদি jQuery এ ইভেন্টটি পরিচালনা করছেন তবে event.preventDefault()যাবার উপায়।

Answer 23

<a href="#!">Link</a>এবং<a href="#/">Link</a> করে না কাজ যদি এক একাধিকবার একই ইনপুট উপর ক্লিক করতে হবে .. এটি শুধুমাত্র একাধিক ইনপুট প্রতিটি জন্য 1 টি ইভেন্ট ক্লিকে লাগে।

এখনও যেতে সবচেয়ে ভাল উপায় সঙ্গে <a href="#">Link</a>

তারপর,

event.preventDefault();