Próbuję tak mocno połączyć się z zawartością kart z zewnętrznego linku [zamknięte]

Question

Oct 18, 2012, 11:31 PM

Próbuję tak mocno połączyć się z zawartością kart z zewnętrznego linku [zamknięte]

Strasznie sfrustrowany i zawstydzony, że nie mogę tego zrozumieć. Klient chce mapy witryny na dole strony, która przenosi użytkownika do dowolnej strony i dowolnej karty na tej stronie za pomocą jednego kliknięcia. Powinien być łatwy do zrobienia, ale z jakiegoś powodu nie mogę go owinąć. W dążeniu do całkowitej uczciwości jestem artystą, z wystarczającą znajomością kodu, aby być niebezpiecznym. Nie mogę sam pisać JQuery, ale jestem w stanie czytać już napisane rzeczy i w większości rozumieć, co się dzieje.

Przykład 1- Contact.php Posiada podstawową funkcjonalność

Przykład 2: TabTest1.html Udało mi się pobrać informacje z pytań .com stackoverflow's 10616833 / link-to-anchor-inside-tabbed-content-from-an-external-link i uruchomić go. Skrypt tam nie działa (dla mnie). Zajęło mi to dzień, ale zrozumiałem, co to było (nawiasy, jak zwykle) i to, co widzisz, to informacje w pracy. Niestety, nie tylko podłącza się do mojego już istniejącego kodu. Próbowałem kilku różnych sposobów, ale nie do końca rozumiem, co dzieje się w jsfiddle.

Przykład 2- ContactRE.php To jest moja najlepsza próba pracy z kodem podanym w powyższym pytaniu. Po prostu czuję się przytłoczony. Możesz kliknąć zakładki i zobaczyć, co robi, ale po kliknięciu dowolnej karty wszystkie zapalają się, jak zaznaczono, ale zawartość w ogóle się nie zmienia. Podejrzewam, że ma to coś wspólnego z „// return false;” przed instrukcją „if”, ponieważ anulowanie komentowania powoduje, że wszystko działa ponownie, ale nadal nie może połączyć się z pojedynczą kartą z zewnątrz. Gdy jest włączony, wygląda na to, że link ContactRE.php # Social ma link, ale tylko po wpisaniu go, naciśnięciu Enter, oczekiwaniu, a następnie naciśnięciu odświeżenia.

Przykład 4- index.php Widać, że jest podobny do przykładu 1, po prostu inna strona, aby przetestować linkowanie. To nie działa. Zawartość karty znika.

Zarówno w przykładach 1, 2, jak i 4 można zobaczyć, że próbowałem to rozgryźć samodzielnie, zanim nawet trafiłem na fora w klasie „BottomInfo”, w której znajduje się mapa witryny. Zaczęłam od Links3, kiedy zdałam sobie sprawę z tego, że system, który myślałam, będzie działał, w Links2 i Links1 nie zamierzał go przeciąć. Po prostu wziąłem linki tworzące karty, usunąłem stylizację poprzez CSS i stworzyłem listę. Działa dla danej strony, ale nie łączy się zewnętrznie.

Stworzyłem JSFiddle dla tych, którzy go preferują. Nie jestem zbyt dobry w zrozumieniu „hej, po prostu dodaj to i nagle - magia!” po których następuje fragment kodu, chyba że zawierają świetne wyjaśnienia. Może pewnego dnia, jeszcze nie.http://jsfiddle.net/ANCannan/CfGHp/

Poniżej znajduje się mój działający JS, ale nie mogę użyć skrótu w URL, aby połączyć się z kartami zewnętrznie

    <script type= "text/javascript"> 
   $(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;

  });});
  </script>

To jest moja próba JS Frankensteina, aby karty były linkowane przez skrót w URL

       <script type= "text/javascript"> 
       $(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();
   });
   });});
    </script>

To jest mój skrócony HTML

<div class= "Centered" id="TextContent">
    <div id="tabs_container">
      <ul id="tabs">
      <li>
        <div class= "Centered" id="TextContent2">
          <div id="tabs_container2">
            <ul id="tabs2">
              <li class="active">
                <div class= "LinkText" id="TT1"> <a class="icon_accept" href="#Before">Before</a></div>
              </li>
              <li>
                <div class= "LinkText" id="TT2"> <a class="icon_accept" href="#During">During</a></div>
              </li>
              <li>
                <div class= "LinkText" id="TT3"> <a class="icon_accept" href="#After">After</a></div>
              </li>
            </ul><!---Ends ul id "tabs" container2-->
          </div><!---Ends "tabs_container2"-->
        </div><!---Ends "Centered Text Content2"-->
        </li>
       </ul><!---Ends ul id "tabs-->
     </div><!---Ends "tabs-container"-->

    <div id="tabs_content_container">
        <div id="Before" class="tab_content" style="display: block;">
         <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>
           </div><!---Ends Before container-->

             <div id="During" class="tab_content" style="display: block;">   
          <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. 

       </div><!---Ends "During"-->

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

         <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>
                    </div><!---Ends "After"-->

Przeczytałem i spróbowałem zaimplementować na różne sposoby, choć żaden nie działał. Próbowałem nawet zastosować część struktury myśli akordeonowej, ponieważ ludzie wydają się zadawać to samo pytanie dotyczące akordeonów, ale nie jestem dobry w stosowaniu go do zakładek.

powiązane pytania dotyczące przepływu stosuzawartość link-to-an-anchor-in-jquery-tabbed niezdolny do wywołania-specyficzny-zawartość-z-zewnętrznego-pliku-wewnątrz-jquery use-one-jquery-code-for-all-tabs zakładka „połącz-bezpośrednio-z-akcją-akordeonem”akordeon link-to-open-jquery jquery-tabs-link-to-another-tab-from-inside

Temat JQuery / link-to-tab-from-outside-tabs-div

Przepraszam za brak linków, najwyraźniej mogę wysłać tylko 2.

GŁÓWNA AKTUALIZACJA 19 października 1 PM ET Jeszcze nie rozwiązałem całkowicie mojego problemu, ale mogę teraz połączyć się z konkretnym adresem URL spoza witryny (lub wpisać go), jeśli jednak jestem na stronie, URL aktualizuje się po kliknięciu link na stronie lub wpisz go ręcznie, ale nie zmienia zawartości, dopóki nie klikniesz „odśwież”. Strona jesthttp://certus.worldpath.net/crazy.html Połącz bezpośrednio z kartą, dodając „#Email” do końca. Myśli?

Będę bardzo wdzięczny za każdą pomoc, jaką możesz mi dać.