Вопрос отображения вкладок JQuery - мне нужно отобразить содержимое, не относящееся к 4 вкладкам (т. Е. Вход / регистрация)

Question

У меня 4 вкладки JQuery в приложении ASP.Net MVC 3.Все вкладки отображают правильное содержание при нажатии вкладок.Однако я хочу отобразить данные для входа / регистрации, когда пользователь нажимает ссылку «Вход / Регистрация» в верхней части страницы интерфейса пользователя.Логин / рег должен отображаться под 4 вкладками без содержимого вкладки.Поэтому вкладки должны оставаться видимыми.Хотя ни один из них не будет выбран.

Проблема в том, что содержимое вкладки и содержимое для входа в систему / регистрации отображаются одновременно.Мне нужен только логин / рег контент, который не связан с вкладками для отображения.Мне также нужно, чтобы все вкладки были отменены.Любая помощь приветствуется!

  <script type="text/javascript">
     $(function () {            
        $('#tabs').tabs();
     });
 </script>       

<div id="menu" style=" background-color:White; width:1024px; height:auto; float:left;">

            <!-- Must have class= info to prevent flash of just content on refresh -->
            <div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all" style=" position:relative; border:0px;"   >
                <ul class="ui-tabs-nav">                        
                    <li><a href="#tabs-1" >Home</a></li>
                    <li><a href="#tabs-2" >Statistics</a></li>
                    <li><a href="#tabs-3" >Topo Maps</a></li>
                    <li><a href="#tabs-4" >FAQs</a></li>
                </ul>
                <div id="tabs-1" class="ui-tabs-hide ui-tabs-panel ">@Html.Partial("../Home/Home") </div>
                <div id="tabs-2" class="ui-tabs-hide ui-tabs-panel ">@Html.Partial("../Statistics/Statistics")</div>
                <div id="tabs-3" class="ui-tabs-hide ui-tabs-panel ">@Html.Partial("../Maps/Maps")</div>
                <div id="tabs-4" class="ui-tabs-hide ui-tabs-panel ">@Html.Partial("../Home/FAQs")</div>
            </div>

        </div>

Answer 1

Если я правильно понимаю ваш вопрос, вы хотите свернуть содержимое вкладки, когда пользователь пытается войти / зарегистрироваться.Перво-наперво, вы должны установить параметры вкладок, чтобы их можно было свернуть.Таким образом, отредактируйте ваши вызовы вкладок, чтобы отразить это

$('#tabs').tabs({ collapsible: true });

Отсюда вы можете прикрепить обработчик событий к вашему событию клика входа / регистрации.Вы захотите сделать две вещи: 1) получить текущий выбранный индекс вкладок и 2) запустить событие выбора вкладок, чтобы свернуть вкладки.Это может выглядеть примерно так:

$('.login').click(function () {
        var tabIdx = $( "#tabs" ).tabs( "option", "selected" );
        $("#tabs").tabs( "select" , tabIdx); //collapse the currently selected tab

        // continue with your login/registration click event
});

Answer 2

Здесь у вас есть пример http://jsfiddle.net/YnZRa/1/

Шаги

1. Добавить новую вкладку с <li style="display:none;"><a href="#tabs-4">Tab 4</a></li>
2. Добавить содержимое в новый div

3. Отредактируйте скрипт с помощью этого

   //Edit the script this way to show the content with a click in a link
   
   $(document).ready(function(){
   
   var $tabs = $( "#tabs" ).tabs();
   
   $('.goto').click(function() { // bind click event to link
       $tabs.tabs('select', 3); // switch to fourth tab
       return false;
   });
   });
   

   Надеюсь, это работает !!:)