Пытаюсь изо всех сил связать контент с вкладками с помощью внешней ссылки [закрыто]

Ужасно разочарован и смущен, что я могуне могу понять это. Клиенту нужна карта сайта внизу сайта, которая одним щелчком мыши переводит пользователя на любую страницу и любую вкладку на этой странице. Это должно быть достаточно легко, но по какой-то причине я могуобернуть мой мозг вокруг него. Стремясь к полной честности, я художник, обладающий достаточным знанием кода, чтобы быть опасным. Я могу'Я не могу написать JQuery самостоятельно, но я могу читать уже написанные вещи и по большей части понимать, что происходит.

Пример 1 - Contact.php Обладает базовой функциональностью

Пример 2 - TabTest1.html Я смог взять информацию из stackoverflow 's .com questions 10616833 / link-to-anchor-inside-tabbed-content-from-external-link и заставьте его работать. Сценарий там на самом деле нет работа (для меня). Это заняло у меня один день, но я понял, что это было (как обычно, в скобках), и что вы видите, так это информацию на работе. К сожалению, это непросто включи мой уже существующий код. Я'Я пробовал несколько разных способов, но я неЯ не совсем понимаю, что происходит в jsfiddle.

Пример 2 - ContactRE.php Это моя лучшая попытка поработать с кодом, приведенным в приведенном выше вопросе. Я просто чувствую себя подавленным. Вы можете нажать на вкладки и посмотреть, что они делают, но после нажатия на любую вкладку, они все подсвечиваются, как выбранный, но содержание нене меняется вообще. У меня есть подозрение, что это как-то связано с// return false; " перед "если" заявление, потому что без комментариев это все снова работает, но по-прежнему не может ссылаться на отдельную вкладку извне. Когда он включен, кажется, что ContactRE.php # Social делает ссылку, но только после того, как он введен, нажав ввод, ожидание, а затем нажатие обновления.

Пример 4 - index.php Вы можете видеть, что это похоже на Пример 1, просто другая страница для проверки ссылок. Это нет работа. Содержание вкладки просто исчезает.

В обоих Примерах 1, 2 и 4 вы можете видеть, что я пытался выяснить это самостоятельно, прежде чем даже попасть на форумы в "BottomInfo» класс, где будет расположена карта сайта. Links3 - это то, с чего я начал, когда понял, что система, которая, по моему мнению, будет работать, в Links2 и Links1 не былане собираюсь резать это. Я просто взял ссылки, которые составляют вкладки, удалил стили с помощью CSS и составил список. Работает на этос соответствующей страницы, но не для внешней ссылки.

Мы создали JSFiddle для тех, кто предпочитает его. Я не очень хорошо понимаю "эй, просто добавь это и вдруг - волшебство! сопровождаемые фрагментами кода, если они не идут с большими объяснениями. Может быть, однажды, просто еще нет.http://jsfiddle.net/ANCannan/CfGHp/

Ниже мой рабочий JS, но я не могу использовать хеш в URL для внешней ссылки на вкладки

     
   $(document).ready(function(){
  //  When user clicks on tab, this code will be executed
   $("#tabs li").click(function() {
  //  First remove class "active" from currently active tab
   $("#tabs li").removeClass('active');

  //  Now add class "active" to the selected/clicked tab
   $(this).addClass("active");

  //  Hide all tab content
   $(".tab_content").hide();

  //  Here we get the href value of the selected tab
   var selected_tab = $(this).find("a").attr("href");

  //  Show the selected tab content
   $(selected_tab).fadeIn();

  //  At the end, we add return false so that the click on the link is not executed
     return false;

  });});
    

Это моя попытка Frankenstein JS сделать вкладки связанными с помощью хэша в URL.

        
       $(document).ready(function(){
      //  When user clicks on tab, this code will be executed
       $("#tabs li").click(function() {
      //  First remove class "active" from currently active tab
       $("#tabs li").removeClass('active');

      //  Now add class "active" to the selected/clicked tab
       $(this).addClass("active");

     //  Hide all tab content
       $(".tab_content").hide();

    //  Here we get the href value of the selected tab
     var selected_tab = $(this).find("a").attr("href");

    //  Show the selected tab content
    $(selected_tab).fadeIn();

    //  At the end, we add return false so that the click on the link is not executed
     return false;
    });
if (window.location.hash !== '') {
    var $targetAnchor = $(document.location.hash);
    // Grab the ID of the .tab-content that the hash is referring to
    tabId = $targetAnchor.closest('.tab_content').attr('id');

    // Find the anchor element to "click", and click it
    $("#tabs li").find('a[href=#' + tabId + ']').click();

    $('html, body').animate({
        scrollTop: $targetAnchor.offset().top
    });
    }


   $('a').not('.tabs li a').on('click', function(evt) {
     evt.preventDefault();
     var whereTo = $(this).attr('goto');
    $tabs = $("ul.tabs li");
    $tabs.find('a[href=#' + whereTo + ']').trigger('click');
      alert(attr('name'));
     alert( $('#'+whereTo+' a').offset().top );
    $('html, body').animate({
      scrollTop: $('#'+whereTo+' a').offset().top
   });

 });

 $(function() {
     $('a.refresh').live("click", function() {
     location.reload();
   });
   });});
     

Это мой сокращенный HTMLI


    
      
      
        
          
            
              
                 <a class="icon_accept" href="#Before">Before</a>
              
              
                 <a class="icon_accept" href="#During">During</a>
              
              
                 <a class="icon_accept" href="#After">After</a>
              
            
          
        
        
       
     

    
        
         <img src="Images/before.png" class="alignLeft" alt="CMC and QA Icons"><p>Sed do eiusmod tempor incididunt consectetur adipisicing elit,   duis aute irure dolor. In reprehenderit in voluptate quis nostrud   exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia   deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate   cupidatat non proident, sed do eiusmod tempor incididunt.</p>
        <p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur   adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam.   Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum   dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat   nulla pariatur.</p><p>Sed do eiusmod tempor incididunt consectetur adipisicing elit,   duis aute irure dolor. In reprehenderit in voluptate quis nostrud   exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia   deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate   cupidatat non proident, sed do eiusmod tempor incididunt.</p>
        <p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur   adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam.   Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum   dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat   nulla pariatur.</p>
           

                
          <p>In reprehenderit in voluptate   cupidatat non proident, sed do eiusmod tempor incididunt.</p>
           <p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur   adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam.   Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum   dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat   nulla pariatur.</p>
           <p>Sed do eiusmod tempor incididunt consectetur adipisicing elit,   duis aute irure dolor. In reprehenderit in voluptate quis nostrud   exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia   deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate   cupidatat non proident, sed do eiusmod tempor incididunt.</p>
           <p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur   adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam.   Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum   dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat   nulla pariatur. 

       

           
             <img src="Images/after.png" class="alignRight" alt="CMC and QA Icons">

         </p><p> </p><p>Sed do eiusmod tempor incididunt consectetur adipisicing elit,   duis aute irure dolor. In reprehenderit in voluptate quis nostrud   exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia   deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate   cupidatat non proident, sed do eiusmod tempor incididunt.</p>
       <p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur   adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam.   Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum   dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat   nulla pariatur.</p>
      <p>Sed do eiusmod tempor incididunt consectetur adipisicing elit,   duis aute irure dolor. In reprehenderit in voluptate quis nostrud   exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia   deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate   cupidatat non proident, sed do eiusmod tempor incididunt.</p>
       <p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur   adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam.   Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum   dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat   nulla pariatur.</p>
                    

Мы прочитали следующее и попытались реализовать различными способами, но ни один из них не сработал. Я'Мы даже пытались применить некоторую структуру мышления аккордеона, поскольку люди, похоже, задают один и тот же вопрос об аккордеонах, но я не очень хорош в применении его к вкладкам.

связанные вопросы по stackoverflowссылка-на-ан-якорь внутри-JQuery-закладки-контентнеспособный к вызову специфичный-контент-с-с-внешнего-файла-внутри-JQueryиспользовать один-JQuery-код-для-всех-закладкахкак к ссылке-прямо-в-Jquery-аккордеониста вкладкессылка к открытым Jquery-гармошкиJQuery-Вкладки-ссылка-на-другую вкладку-из-внутри-

JQuery»s topic / link-to-tab-from-outside-tabs-div

Извините за отсутствие ссылок, видимо я могу только пост 2.

ОСНОВНОЕ ОБНОВЛЕНИЕ 19 октября 1 вечера по восточному времени I 'Я еще не полностью решил мою проблему, но теперь я могу ссылаться на определенный URL-адрес за пределами веб-сайта (или ввести его), однако, если я нахожусь на странице, URL-адрес обновляется, когда я нажимаю на ссылку на странице или введите его вручную, но он не изменит содержимое, пока не будет выполнен один щелчок "обновить «. Страница являетсяhttp://certus.worldpath.net/crazy.html Ссылка прямо на вкладку, добавив#Эл. адрес" к концу. Мысли?

Я буду очень признателен за любую помощь, которую вы можете мне дать.

Ответы на вопрос(2)

Ваш ответ на вопрос