Я использую jQuery для создания списка вкладок; и когда будет нажата одна из 4 вкладок, вы попадете в контент внутри скрытого div. И, конечно, есть 4 скрытых divs, по одному на вкладку.

К сожалению, я jQuery Noob, и хотя есть несколько вещей, которые я хотел бы сделать, я еще не обладаю навыками для этого. И, следовательно, вы, ребята, посещаете stackoverflow - моя единственная надежда. Может ли это быть достигнуто? Если да, любезно дайте мне знать.

1. Используя ссылку на первой вкладке, перейдите на третью вкладку. Например: Перейдите на вкладку 3. Но это не сработает. Я предполагаю, что должна существовать какая-то функция, которая имеет вид: onClick = "goToThatDiv()".

2. Пока на вкладке-2, если обновлено, страница перезагрузится с помощью вкладки-1, так как первая вкладка имеет класс: текущий. В любом случае, можно ли оставаться на второй вкладке даже после обновления страницы?

Вот основные моменты кода:

HTML

<!-- BEGINNING OF TABS DIV-->
<div id="tab_container">

        <!-- BEGINNING OF Tab list-->
        <ul class="tabs">
            <li class="tab-link current" data-tab="tab-1">Tab 1</li>
            <li class="tab-link" data-tab="tab-2">Tab 2</li>
            <li class="tab-link" data-tab="tab-3">Tab 3</li>
            <li class="tab-link" data-tab="tab-4">Tab 4</li>
        </ul>
        <!-- END OF Tab list-->



   <div id="tab-1" class="tab-content current"><!-- BEGINNING OF CURRENT DIV-->
      // Tab 1 Content goes here.
        <a href=" // link to the 3rd tab "> To the 3rd Tab </a>
        <a href=" // link to the 4th tab "> To the 4th Tab </a>
   </div> <!-- END OF CURRENT DIV-->


   <div id="tab-2" class="tab-content"><!-- BEGINNING OF 2nd DIV-->
      // Tab 2 Content goes here.
   </div> <!-- END OF 2nd DIV-->


   <div id="tab-3" class="tab-content"><!-- BEGINNING OF 3rd DIV-->
      // Tab 3 Content here.
   </div> <!-- END OF 3rd DIV-->


   <div id="tab-4" class="tab-content"><!-- BEGINNING OF 4th DIV-->
      // Tab 4 Content here.
   </div> <!-- END OF 4th DIV-->


</div><!-- END OF TABS DIV-->    

Jquery

<script>
$(document).ready(function(){

    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    })

})
</script>

CSS

/*****************Tabs CSS**********************/


        ul.tabs{

            list-style: none;
        }
        ul.tabs li{
            background:black;
            display: inline-block;

        }

        ul.tabs li:hover {
            background: blue;

        }

        ul.tabs li.current{
            background: green;

        }

        .tab-content{
            display: none;

        }

        .tab-content.current{
            display: inherit;
        }

/*****************End of Tabs CSS**********************/