CODEWITHSUNDEEP
javascriptjqueryhtmlcsstabs
user3149053
user3149053

Reputation: 43

on pressing tab it is not moving to next tab

I am creating tab using html css and jquery. I am not using jquery ui. Let me explain the problem.

in tabs there are Many tabs.every tabs contains texbox,drop down,checkbox, etc. for example when user in the first tab. in this tab text boxes are there. when user come to last text box when it is pressing the tabkey it will move to next tab's first element(like textbox/dropdown etc).I created this but it is not moving to tabs textbox. the code is available on pastebin and js fiddle. i not find findout what is the problem with my code. if you need any clarification plz ask me

Note :please do not suggest tabindex. I want to do using jquery.

Link:demo on jsfiddle paste bin:-http://pastebin.com/E85NsNtg

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'/>
        <title>jQuery Tabs Demo</title>
        <style>
            * {padding:0; margin:0;}

            html {
                background:url(/img/tiles/wood.png) 0 0 repeat;
                padding:15px 15px 0;
                font-family:sans-serif;
                font-size:14px;
            }

            p, h3 { 
                margin-bottom:15px;
            }

            div {
                padding:10px;
                width:600px;
                background:#fff;
            }

            .tabs li {
                list-style:none;
                display:inline;
            }

            .tabs a {
                padding:5px 10px;
                display:inline-block;
                background:#666;
                color:#fff;
                text-decoration:none;
            }

            .tabs a.active {
                background:#fff;
                color:#000;
            }

        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="global.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    </head>
    <body>
    <div id="tabs">
        <ul class='tabs'>
            <li><a id="ATab1" href='#tab1' >Tab 1</a></li>
            <li><a id="ATab2" href='#tab2' >Tab 2</a></li>
            <li><a id="ATab3" href='#tab3' >Tab 3</a></li>
            <li><a id="ATab4" href='#tab4' >Tab 4</a></li>
            <li><a id="ATab5" href='#tab5' >Tab 5</a></li>
            <li><a id="ATab6" href='#tab6' >Tab 6</a></li>

        </ul>
        <div id='tab1'>
            <h3>Section 1</h3>
            Fisrt: <input type="textbox" />
            <br />
            Second: <input type="textbox" />
            <br />
            Third: <input type="textbox" />
            <br />
            Fourth: <input type="textbox" />
        </div>
        <div id='tab2'>
            <h3>Section 2</h3>
            Fifth: <input type="textbox" />
            <br />
            Sixth: <input type="textbox" />
        </div>
        <div id='tab3'>
            <h3>Section 3</h3>
            Seventh: <input type="textbox" />
            <br />
            Eighth: <input type="textbox" />
        </div>
        <div id='tab4'>
        <h3>Section 4</h3>
            ninth: <input type="textbox" />
            <br />
            tength: <input type="textbox" />
        </div>
        <div id='tab5'>
        <h3>section 5</h3>
        11: <input type="textbox" />
        <br />
        12: <input type="textbox" />
    </div>

        <div id='tab6'>
        <h3>section 6</h3>
        13: <input type="textbox" />
        <br />
        14: <input type="textbox" />
    </div>



    </body>
</html>

jquery

$(document).ready(function () {
    $('ul.tabs').each(function () {
        // For each set of tabs, we want to keep track of
        // which tab is active and it's associated content
        var $active, $content, $links = $(this).find('a');

        if ($('#_ctl0_hdnCurrentTabSelection').val() == "") {
            $('#_ctl0_hdnCurrentTabSelection').val(location.hash)
        }

        // If the location.hash matches one of the links, use that as the active tab.
        // If no match is found, use the first link as the initial active tab.
        $active = $($links.filter('[href="' + $('#_ctl0_hdnCurrentTabSelection').val() + '"]')[0] || $links[0]);
        $active.addClass('active');
        $content = $($active.attr('href'));
        window.location.href = window.location.href.toString().split('#')[0] + $active.attr('href');

        // Hide the remaining content
        $links.not($active).each(function () {
            $($(this).attr('href')).hide();
        });

        // Bind the click event handler
        $(this).on('click', 'a', function (e) {
            // Make the old tab inactive.
            $active.removeClass('active');
            //window.location.href = window.location.href.toString().replace($active.attr('href'), '');
            $content.hide();

            // Update the variables with the new link and content
            $active = $(this);
            $('#_ctl0_hdnCurrentTabSelection').val($active.attr("href"))
            $content = $($(this).attr('href'));
            window.location.href = window.location.href.toString().split('#')[0] + $active.attr('href');

            // Make the tab active.
            $active.addClass('active');
            $content.show();

            // Prevent the anchor's default click action
            e.preventDefault();
        });
    });

    $(document).on('keydown',function(e) {
        var keyCode = e.keyCode || e.which; 

        if (keyCode === 9) {
            if(!$('#tab1:last-child').is(':focus') && window.location.href.search('tab1') != -1){
                $('#ATab1').removeClass('active');
                $('#ATab2').addClass('active');

                $('#tab1').hide();
                $('#tab2').show();
                $('#tab3').hide();
                $('#tab4').hide();
                $('#tab5').hide(); 


                window.location = "#tab2";
            }
            else if(!$('#tab2:last-child').is(':focus') && window.location.href.search('tab2') != -1){
                $('#ATab2').removeClass('active');
                $('#ATab3').addClass('active');

                $('#tab1').hide();
                $('#tab2').hide();
                $('#tab3').show();

                window.location = "#tab3";
            }
            else if(!$('#tab3:last-child').is(':focus') && window.location.href.search('tab3') != -1){
                $('#ATab3').removeClass('active');
                $('#ATab4').addClass('active');

                $('#tab1').hide();
                $('#tab2').hide();
                $('#tab3').hide();
                $('#tab4').show();
                window.location = "#tab4";
            }

            else if(!$('#tab4:last-child').is(':focus') && window.location.href.search('tab4') != -1){
                $('#ATab4').removeClass('active');
                $('#ATab5').addClass('active');

                $('#tab1').hide();
                $('#tab2').hide();
                $('#tab3').hide();
                $('#tab4').hide();
                $('#tab5').show();
                window.location = "#tab5";
            }

            else if(!$('#tab5:last-child').is(':focus') && window.location.href.search('tab5') != -1){
                $('#ATab5').removeClass('active');
                $('#ATab6').addClass('active');

                $('#tab1').hide();
                $('#tab2').hide();
                $('#tab3').hide();
                $('#tab4').hide();
                $('#tab5').hide();
                 $('#tab6').show(); 
                window.location = "#tab6";
            }

            else if(!$('#tab6:last-child').is(':focus') && window.location.href.search('tab6') != -1){
                $('#ATab6').removeClass('active');
                $('#ATab1').addClass('active');

                $('#tab1').show();
                $('#tab2').hide();
                $('#tab3').hide();
                $('#tab4').hide();
                $('#tab5').hide();
                $('#tab6').hide();
                $('#tab7').hide();
                window.location = "#tab1";
            }



        }
            e.preventDefault();

     });
});

Upvotes: 0

Views: 1758

Answers (3)

jacquard
jacquard

Reputation: 1307

You can use the children selector:http://jsfiddle.net/Eq3Kn/

        $content.show();
        $content.children('input').eq(0).focus();

Note: I have implemented the focus code for clicks and keyboard navigation from tab1 to tab2.

Upvotes: 0

Leo
Leo

Reputation: 14820

You are using jQuery syntax but you are not referencing the jQuery library in your html. Make sure you add this line right under the title element

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Upvotes: 0

Krish
Krish

Reputation: 1894

Please add jquery latest version on your website

here is the code(please put on <head> tag):-

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

Upvotes: 1

Related Questions