কীভাবে প্রদর্শন যুক্ত করবেন: একটি jQuery শো () ফাংশনে ইনলাইন-ব্লক?

Question

আমার কাছে এর মতো কিছু কোড রয়েছে:

function switch_tabs(obj) {
    $('.tab-content').hide();
    $('.tabs a').removeClass("selected");

    var id = obj.attr("rel");
    $('#' + id).show();
    obj.addClass("selected");
}

শো ফাংশন যোগ display:block। তবে আমি display:inline-blockব্লকের পরিবর্তে যুক্ত করতে চাই ।

Comments

আপনাকে আরও কিছু বিশদ সরবরাহ করতে হবে। এটি আমার জন্য দ্রুত পরীক্ষায় কাজ করে: jsfiddle.net/DD3Sf ।

— গিজগুলি

@ জিজস দুঃখিত এখন এটি কাজ করে। আমি মনে করি এটির কিছু ক্যাশে সমস্যা। আপনার সময়ের জন্য ধন্যবাদ

— গিরি

Answer 1

পরিবর্তে show, বিষয়বস্তুটি লুকিয়ে রাখতে এবং প্রদর্শন করতে CSS ব্যবহার করার চেষ্টা করুন।

function switch_tabs(obj) {
    $('.tab-content').css('display', 'none'); // you could still use `.hide()` here
    $('.tabs a').removeClass("selected");
    var id = obj.attr("rel");

    $('#' + id).css('display', 'inline-block');
    obj.addClass("selected");
}

Comments

এটি সুস্পষ্ট বলে মনে হতে পারে তবে আপনি যদি এখনও show( $("#id").show(500)) এর css$("#id").show(500).css("display", "inline-block");

— সময়িক

আমি এটিকে আরও একধাপ এগিয়ে নিয়ে যাব এবং jQuery নয়, সমস্ত CSS / ক্লাস ব্যবহার করে লুকানোর / দেখানোর যত্ন নেব। $('.tab-content').addClass('hidden'); (...) $('#' + id).removeClass('hidden');.hidden { display: none !important }

— সিএসএসে

যদিও এই গৃহীত উত্তর কিন্তু এটা প্রতিফলিত নাও কী jQuery বিবৃত এর ডক্স : এই ছাড়া প্রদর্শন সম্পত্তি পুনঃস্থাপিত হলে যে যাই হোক না কেন তা প্রাথমিকভাবে ছিল মোটামুটিভাবে সিএসএস ( "ব্লক" "প্রদর্শন",) কলিং সমতূল্য। যদি কোনও উপাদানটির ইনলাইনটির একটি মান মান থাকে, তবে তা লুকিয়ে রেখে দেখানো হয়, এটি আবার একবার ইনলাইন প্রদর্শিত হবে। সুতরাং একটি ডিফল্ট আছে displayআপনার সাথে আপনার CSS এ একটি বর্গ যোগ করতে হবে display:inline-block;তারপর কল hide()এবং show()উপাদান আইডি ব্যবহার করে। এটি ক্লিনার এবং আরও অনুমানযোগ্য কোড এবং শৈলীতে সহজ।

— আব্দুল্লাহ আদিব

@ আব্দুল্লাহআদ্বীব সমস্যাটি হ'ল hide()পেজ লোডে জেএস দ্বারা আপনার প্রয়োজন হবে । বিন্যাস#element{display:inline-block;display:none;} করে না। আমি মনে করি সবচেয়ে পরিষ্কার সমাধান $('#element').fadeIn().addClass('displaytype');- উপরের উত্তরের চেয়ে ভাল, কারণ আপনি .displaytypeসিএসএসে বিভিন্ন গুলি সেট করতে পারেন এবং একটিতে জেএসে ফাংশন প্রদর্শন করতে পারেন। : এখানে আমার উত্তর দেখুন stackoverflow.com/questions/1091322/...

— Fanky

Answer 2

আপনার ব্যবহারের পরে সিএসএস সম্পত্তি সেট করার .show()কাজ করা উচিত। হতে পারে আপনি আপনার HTML পৃষ্ঠায় ভুল উপাদানটিকে টার্গেট করছেন।

 $('#foo').css('display', 'inline-block');

তবে আপনি .show(), .hide()কেন সেই সিএসএস বৈশিষ্ট্যগুলিকে ম্যানুয়ালি পছন্দ করেন না তার কোনও প্রভাব যদি ব্যবহার না করে থাকেন :

$('#foo').css('display','none'); 
$('#foo').css('display','inline-block');

Comments

নোট করুন যে jquery শো / লুকান / টগল পূর্ববর্তী প্রদর্শনের মানগুলিকে পুনরুদ্ধার করে। সুতরাং আপনি যদি এটি jquery দিয়ে আড়াল করেন, কলিং শো কাজ করবে।

— কার্টিস ইয়ালাপ

"আপনি ব্যবহার করার পরে CSS বৈশিষ্ট্য নির্ধারণ করে। শো () কাজ করা উচিত" " আপনি যদি কেবল যেকোনভাবে সিএসএস ম্যানুয়ালি আপডেট করতে যাচ্ছেন তবে শো () ব্যবহার করার মূল বিষয় কী?

— JSON

Answer 3

শো () বা ফেইডইন () এর ঠিক পরে সিএসএস () ব্যবহার করুন:

$('div.className').fadeIn().css('display', 'inline-block');

Answer 4

আমি তাহা করেছিলাম

function showPanels()  {
    $('.panels').show("slow");
    $('.panels').css('display','inline-block');
}

একটি যাদুমন্ত্র মত কাজ করে.

Comments

এটাই কি উত্তর নাকি স্বীকৃতি ..?

— এনআরইজেড

Answer 5

রাজ্জের সমাধানটি পদ্ধতি .hide()এবং .show()পদ্ধতির জন্য কাজ করবে তবে .toggle()পদ্ধতিটির জন্য কাজ করবে না ।

দৃশ্যের উপর নির্ভর করে, সিএসএস ক্লাস থাকা .inline_block { display: inline-block; }এবং কল করা $(element).toggleClass('inline_block')আমার জন্য সমস্যাটি সমাধান করে।

Answer 6

আপনি শো / লুকানোর অ্যানিমেটেড ইনসেট ব্যবহার করতে পারেন

এটার মতো কিছু:

function switch_tabs(obj)
{
    $('.tab-content').animate({opacity:0},3000);
    $('.tabs a').removeClass("selected");
    var id = obj.attr("rel");

    $('#'+id).animate({opacity:1},3000);
    obj.addClass("selected");
}

Answer 7

এটা চেষ্টা কর:

$('#foo').show(0).css('display','inline-block');

Comments

এর show()মধ্যে অর্থহীন। এটি একই$('#foo').css('display','inline-block');

— লিয়ম

@ লিয়াম নিরর্থক নয়। অন্যান্য অনন্য showবিকল্পের অ্যাক্সেস পেতে আপনি সহজেই 0 টি পরিবর্তন করতে বা এটি সংশোধন করতে পারেন ।

— জেসিদারিস

Answer 8

আমি মনে করি আপনি উভয়ই অ্যানিমেশন চান এবং শেষে ডিসপ্লে সম্পত্তিটি সেট করতে। show()সেক্ষেত্রে আপনি নীচের চিত্রের মতো আরও ভাল কলব্যাক ব্যবহার করুন

$("#my_obj").show(400,function() {
    $("#my_obj").css("display","inline-block")
}) ;

এইভাবে আপনি উভয় ফলাফল অর্জন করবে।

Comments

এটি সঠিক নয়, inline-blockপুরো অ্যানিমেশনটি চালানোর পরে আপনি মোডটি শেষ করবেন । এর অর্থ এটি 400ms এর মধ্যে blockএবং inline-blockপরে "পপ" হবে ।

— অ্যালেক্সিস উইলকে

Answer 9

<style>
.demo-ele{display:inline-block}
</style>

<div class="demo-ele" style="display:none">...</div>

<script>
$(".demo-ele").show(1000);//hide first, show with inline-block
<script>

Answer 10

আসলে jQuery কেবল 'ডিসপ্লে' সম্পত্তিটির মান সাফ করে এবং এটিকে 'ব্লক' হিসাবে সেট করে না (jQuery.showHide ()) এর অভ্যন্তরীণ বাস্তবায়ন দেখুন -

   function showHide(elements, show) {
    var display, elem, hidden,

...

         if (show) {
            // Reset the inline display of this element to learn if it is
            // being hidden by cascaded rules or not
            if (!values[index] && display === "none") {
                elem.style.display = "";
            }

...

        if (!show || elem.style.display === "none" || elem.style.display === "") {
            elem.style.display = show ? values[index] || "" : "none";
        }
    }

দয়া করে নোট করুন যে আপনি $ .fn.show () / $। Fn.hide () ওভাররাইড করতে পারেন; লুকানোর সময় অরিজিনাল ডিসপ্লে সংরক্ষণ করে (যেমন একটি অ্যাট্রিবিউট হিসাবে বা $ .ডাটা ()); এবং তারপরে প্রদর্শন করার সময় এটি আবার প্রয়োগ করুন।

এছাড়াও, সিএসএস ব্যবহার গুরুত্বপূর্ণ! সম্ভবত এখানে কাজ করবে না - যেহেতু স্টাইলের ইনলাইনটি সেট করা সাধারণত অন্য কোনও নিয়মের চেয়ে শক্তিশালী

Answer 11

এটির পিতামাতাদের মধ্যে সেরা .let display :inline-blockবা কোনও divসিএসএসের কাছে পিতামাতাকে যুক্ত করুন display :inline-block।

Answer 12

সেরা উপায়টি নির্বাচকটির কাছে গুরুত্বপূর্ণ প্রত্যয় যুক্ত করা।

উদাহরণ:

 #selector{
     display: inline-block !important;                   
}

Comments

এটি কি লুকায়িত করে না?

— কান সোরাল

গুরুত্বপূর্ণ কেবলমাত্র প্রান্তের ক্ষেত্রে প্রয়োজনীয় যখন অন্য কোনও বিকল্প নেই। আমার মতে এই সমস্যাটির কাছে যাওয়ার সঠিক উপায় নয় যখন এটি আরও ভাল jQuery কোড দিয়ে স্থির করা যেতে পারে।

— ব্র্যান্ডন 17

গুরুত্বপূর্ণ জিনিস সম্পর্কে মনে রাখা !importantএটি হয় গুরুত্বপূর্ণ এটি ব্যবহার করবেন করতে।

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