ijquery

تب عمودی

screenshot

تب جی کوئری عمودی

آموزش استفاده

  1. فراخوانی css و js
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
        <!--[if IE 7]>
        <style type="text/css">
            #vtab > ul > li.selected{
                border-right: 1px solid #fff !important;
            }
            #vtab > ul > li {
                border-right: 1px solid #ddd !important;
            }
            #vtab > div { 
                z-index: -1 !important;
                left:1px;
            }
        </style>
        <![endif]-->
        <style type="text/css">
            body {
                background: #fff;
                font-family: verdana;
                padding-top: 50px;
    			direction:rtl;
            }
            #vtab {
                margin: auto;
                width: 800px;
                height: 100%;
            }
            #vtab > ul > li {
                width: 110px;
                height: 110px;
                background-color: #fff !important;
                list-style-type: none;
                display: block;
                text-align: center;
                margin: auto;
                padding-bottom: 10px;
                border: 1px solid #fff;
                position: relative;
                border-right: none;
                opacity: .3;
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
            }
            #vtab > ul > li.home {
                background: url('home.png') no-repeat center center;
            }
            #vtab > ul > li.login {
                background: url('login.png') no-repeat center center;
            }
            #vtab > ul > li.support {
                background: url('support.png') no-repeat center center;
            }
            #vtab > ul > li.selected {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background-color: #FAFAFA !important;
        border-color: #DDDDDD #DDDDDD #DDDDDD -moz-use-text-color;
        border-image: none;
        border-style: solid solid solid none;
        border-width: 1px 1px 1px medium;
        opacity: 1;
        position: relative;
        z-index: 10;
            }
            #vtab > ul {
        display: block;
        float: right;
        margin: auto 0;
        padding: 0;
        position: relative;
        text-align: left;
        top: 30px;
        width: 110px;
            }
            #vtab > div {
        background-color: #FAFAFA;
        border: 1px solid #DDDDDD;
        margin-right: 110px;
        min-height: 500px;
        padding: 12px;
        position: relative;
        z-index: 9;
            }
            #vtab > div > h4 {
                color: #800;
                font-size: 1.2em;
                border-bottom: 1px dotted #800;
                padding-top: 5px;
                margin-top: 0;
            }
            #loginForm label {
                float: left;
                width: 100px;
                text-align: right;
                clear: left;
                margin-right: 15px;
            }
            #loginForm fieldset {
                border: none;
            }
            #loginForm fieldset > div {
                padding-top: 3px;
                padding-bottom: 3px;
            }
            #loginForm #login {
                margin-left: 115px;
            }
        </style>
    
        <script type="text/javascript">
            $(function() {
                var $items = $('#vtab>ul>li');
                $items.mouseover(function() {
                    $items.removeClass('selected');
                    $(this).addClass('selected');
    
                    var index = $items.index($(this));
                    $('#vtab>div').hide().eq(index).show();
                }).eq(1).mouseover();
            });
        </script>

     

  2. html
        <div id="vtab">
            <ul>
                <li class="home selected"></li>
                <li class="login"></li>
                <li class="support"></li>
            </ul>
            <div>
                <h4>
                    خوش آمدید صفحه اصلی!</h4>
    این صفحه لازم است برای ارسال یک دیدگاه.دفعات بازدید: زندگی، دروازه نیازهای نرم پمپاژ. اما نه در اینجا بیشتر کاربران. دقیقه درد اضافی و یا چند شاخص؟ به خودروهای ساخت و ساز جدید خوش آمدید! برجسته ها دامن حفاری یک طیف گسترده ای شده است. خوش آمدید به محصولات امروز به صورت رایگان. کسب و کار دامن دارایی سرمایه گذاری!
    <br />
    <br />
    اما من مایل به سرمایه گذاری و یک نوشیدنی بزرگ است. شیر جستجو قبل از. همیشه بیشتر و بیشتر پروتئین وجود دارد. تا هتل ها و تختخواب به بازدید کننده بیشتر نیاز دارد، برای هر لبخند مصرف کننده، به آن نیاز دارد بیش از آن و یا بیشتر است. ما فقط بهترین خدمات مهاجرت دامن استفاده کنید. تلفن: * لطفا. اطلاعات بیشتر در اینجا در حال حاضر، اما زندگی سرمایه گذاری نیست. بدانید در مورد خنده شما، اما آن را کسر.
            </div>
            <div>
                <h4>
                    ورود امن</h4>
                <form id="loginForm" action="">
                <fieldset>
                    <legend>ایمیل و رمز عبور خود را وارد کنید</legend>
                    <div>
                        <label for="email">
                            ایمیل:</label>
                        <input type="text" name="email" id="email" />
                    </div>
                    <div>
                        <label for="password">
                            رمز عبور:</label>
                        <input type="password" name="password" id="password" />
                    </div>
                    <div>
                        <input id="login" type="submit" value="واردشوید" />
                    </div>
                </fieldset>
                </form>
            </div>
            <div>
                <h4>
                    پشتیبانی آنلاین</h4>
                E است. اضافه کردن یک نظر، در اینجا و در گلو، یک نیاز برای اقامت.خدمات املاک و مستغلات و سمی تر لبخند. کسب اطلاعات بیشتر در مورد قیمت، و آن را به پشته در حال حاضر مسموم را اضافه نمی کند. تا مدرسه، گاهی اوقات برنامه ریزی بارداری، مگر اینکه عدالت دادگاه منطقه ای هر دارایی را برای لبخند کسی است.<br />
                <br />
                مشتریان ما، عمر گلدان از کشور، لطفا، و یا فعالیت های منطقه ای، برخی از
                و بدون هیچ جرم و جنایت است. فردا کوزه گلدان، ورود به برخی از، اما، اسکناس
                و بیشتر!دروازه ورودی از اطلاعات نرم. تا زمانی که کارمند است، اما بسیاری از کسب و کار،
                بررسی خودکار خالص، دریاچه سیاه، و نه خود را. خوش آمد
                ادامه مطلب.
            </div>
        </div>

     


پیش نمایش دانلود فایل پلاگین

7 دیدگاه دربارهٔ «تب عمودی»

  1. سلام
    این تب ها رو میشه توی یک نوشته وردپرس گذاشت؟ مثلا تو قسمت html?یا حتما باید تو استایل رفت؟
    من میخوام نوشتم بصورت تب عمودی باشه مثلا مثل منوی هدایت کننده مطلب رو بخش بندی کنم به نظر میاد برگه ها رو به صورت تب دسته بندی کرده؟

  2. مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی

  3. سلام
    ممنون از کدتان خیلی عالیست فقط یک سوال دارم :
    با چه کدی میشه وقتی تعداد این تب ها را زیاد می کنیم نوشته را تنظیم کنیم که در جلوی عکس باز شود ؟

  4. سلام
    ببخشید چطوری میتونم کاری بکنم تا وقتی که روی آیکون ها کلیک میکنم صفحه تغییر کنه؟؟
    وقتی mouseover رو به onclick تغییر میدم، با مشکل مواجه میشم!
    میشه راهنمایی کنید؟؟

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *