تمام سوالات سوالات بدون پاسخ سوال بپرسید

با سلام من قصد قالب بندی یک صفحه وب را دارم می خوام صفحه به دو قسمت کلی عمودی تقسیم شود به نام های Left_side و right_side خود بخش left نیز به دو بخش افقی تقسیم می شود. این کار را با div انجام داده ام.

سوالم اینه که آیا شیوه نوشتن CSS و تگ های HTML ام صحیح است و یا باید به شکل دیگری که اصولی است این کار صورت گیرد. لطفا راهنمایی فرمایید.

<html>
    <head>
        <style>
            #container {
                width: 960px;
                margin-left: auto;
                margin-right: auto
            }

            #left_side {
                width: 75%;
                float: left
            }

            #top {
                height:100px;
                background-color: gray
            }

            #body {
                height: 400px;
                background-color: blue;
            }

            #right_side {
                height:500px;
                background-color: green;
                width: 25%;
                float: right
            }
        </style>
    </head>
    <body>

    <div id="container">
        <div id = "left_side" >
            <div id="top" >top</div>
            <div id="body">body</div>
        </div>
        <div id="right_side">right side</div>
    </div>

    </body>
    </html>

بخش دوم سوال: عرض قسمت چپ صفحه (با آیدی left_side) برابر است با 75 درصد از عرض کل که در div اصلی تعیین کردم.

حالا با کمک jQuery گفتم اگه روی دکمه ای کلیک شد بخش راست صفحه سایت مخفی و آشکار شود.

حالا سوالم این است که چطور زمانی که بخش راست صفحه مخفی شد بخش سمت چپ کل عرض صفحه را پر کند و زمانی که بخش راست صفحه آشکار شد مجدد 75 درصد از صفحه را اشغال کند؟ لطفا راهنمایی فرمایید.

تگ button در تگ div با آیدی body

<button id="b">click me!</button>

کد jQuery در بخش body

<script>
    $('#b').click(function(){
        $('#right_side').toggle();
    })
</script>
1 پاسخ

سلام . درسته همین کدی که نوشتید.
فقط یادتون باشه که تو استایل ها آخرین پراپرتی رو که نوشتید، حتما بعدش ";" بذارید. درسته بدون اونم راه میفته کار ولی استانداردش اینه که بذارید.
اینم خروجی کد شما

موفق باشید.

-----------------------------------------------

خب ،بخش دوم جواب شما...
من تو همون صفحه ، جوابم رو اپدیت کردم و کد جی کوئری رو گذاشتم.
من از ToggleClass استفاده کردم و استایل ها رو تغییر دادم .
برای قشنگی کار هم از Transition استفاده کردم.

$('#b').click(function(){
     $( ".right_side" ).toggleClass( "rightToggle", 1000 );
  $( ".left_side" ).toggleClass( "leftToggle", 1000 );
    });

.left_side {
                width: 75%;
                float: left;
        background-color:red;
    height:500px;
        transition :all 0.5s ease 200ms;
            }
  .right_side {
                height:500px;
                background-color: green;
                width: 25%;
                float: right;
        transition :all 0.5s ease 200ms;
            }
.rightToggle{
    width:0;
    transition :all 0.5s ease 200ms;
}
.leftToggle{
    width:100%;
        transition :all 0.5s ease 200ms;
}

آقا خیلی ممنون. با این متد toggleClass آشنا نبودم. کدتان را در اسرع وقت و سر فرصت حتما بررسی خواهم کرد.

(06 ژوئیه '14, 14:33) soltani

کار متد toggleClass : فرض کنید شما برای یک تگ ،دو کلاس در استایل ها تعریف میکنید. مثلا: کلاس a میگه طول این تگ 150px باشه و کلاس b میگه طول این تگ 50px باشه.حالا متد toggleClass ، بین این دوتا کلاس سوییچ میکنه.کاری که تو مثال بالا نشون دادم.توضیحات بیشتر رو تو لینک زیر بخونید. http://jqueryui.com/toggleClass/

(07 ژوئیه '14, 09:07) talebihamid

ممنون. متوجه شدم درواقع کار دو متد addClassName و removeClassNamevh را انجام میدهد.

(07 ژوئیه '14, 12:12) soltani
toggle preview



آموزش زبان برنامه نویسی C#
آموزش jquery
آموزش برنامه نویسی
آموزش طراحی وبسایت
آموزش مدیریت وبسایت
آموزش جاوا Java
آموزش پایتون Python
آموزش سی شارپ C#‎
آموزش HTML و CSS
آموزش JavaScript جاوااسکریپت
آموزش jQuery جی کوئری
آموزش ساخت ربات تلگرام
آموزش برنامه‌نویسی PHP
آموزش برنامه‌نویسی اندروید
● آموزش‌های رایگان

سوالات مرتبط

راهنمای استفاده از ویرایشگر
  • *ایتالیک*‌ یا __ایتالیک__
  • **ضخیم** یا __ضخیم__
  • آدرس:[متن](http://url.com/ "عنوان")
  • عکس?![alt متن](/path/img.jpg "عنوان")
  • لیست عددی: 1. Foo 2. Bar
  • برای رفتن به خط بعد، هر جا مایلید که خط جدید شروع شود دو کاراکتر فاصله (space) قرار دهید
  • تگ‌های ساده HTML هم پشتیبانی می‌شوند

تگها:
  • ×88
  • ×52
  • ×46
  • پرسیده شده: 06 ژوئیه '14, 12:32
  • بازدید: 2,445 بار
  • آخرین بروزرسانی: 07 ژوئیه '14, 12:12

این سوال را دنبال کنیدتوسط ایمیل: ایمیل شما (باید معتبر باشد, هرگز به دیگران نمایش داده نمیشود):

هنگامی که شما به سیستم وارد شوید،قادر خواهید بود برای بروز رسانی ها مشترک شوید.


توسط RSS:

پاسخها

پاسخها و نظرها