webForumDet fria alternativet

Ladda in önskat innehåll i stället för att visa en default-div?

JavaScript

1 svar · 496 visningar · startad av bassebhu

Medlem sedan nov. 20016 480 inlägg
Frågan#1

Hej!

Jag sitter med lite Ajax-kod som jag skulle vilja modifiera en smula. Det är det här BBQ-scriptet som gör att man kan gå framåt/bakåt i webbläsaren och innehållet hänger med, samt att man kan bokmärka etc.

Hur som helst så fungerar det i dagsläget så att om man inte har tryckt på något i menyn så visas en standard-div. Det skulle jag vilja byta ut mot att menyval 1 är det som visas från start och att den knappen då även blir markerad.

I fallet nedan vill jag alltså att "burgers.html" ska vara det som är inladdat direkt när man laddar sidan, inte "bbq-default"-diven.
http://benalman.com/code/projects/jquery-bbq/examples/fragment-basic/

Någon som har en idé om hur?

Tack!

<script type="text/javascript" language="javascript">

$(function(){
  
  // Keep a mapping of url-to-container for caching purposes.
  var cache = {
    // If url is '' (no fragment), display this div's content.
    '': $('.bbq-default')
  };
  
  // Bind an event to window.onhashchange that, when the history state changes,
  // gets the url from the hash and displays either our cached content or fetches
  // new content to be displayed.
  $(window).bind( 'hashchange', function(e) {
    
    // Get the hash (fragment) as a string, with any leading # removed. Note that
    // in jQuery 1.4, you should use e.fragment instead of $.param.fragment().
    var url = $.param.fragment();
    
    // Remove .bbq-current class from any previously "current" link(s).
    $( 'a.bbq-current' ).removeClass( 'bbq-current' );
    
    // Hide any visible ajax content.
    $( '.bbq-content' ).children( ':visible' ).hide();
    
    // Add .bbq-current class to "current" nav link(s), only if url isn't empty.
    url && $( 'a[href="#' + url + '"]' ).addClass( 'bbq-current' );
    
    if ( cache[ url ] ) {
      // Since the element is already in the cache, it doesn't need to be
      // created, so instead of creating it again, let's just show it!
      cache[ url ].show();
      
    } else {
      // Show "loading" content while AJAX content loads.
      $( '.bbq-loading' ).show();
      
      // Create container for this url's content and store a reference to it in
      // the cache.
      cache[ url ] = $( '<div class="bbq-item"/>' )
        
        // Append the content container to the parent container.
        .appendTo( '.bbq-content' )
        
        // Load external content via AJAX. Note that in order to keep this
        // example streamlined, only the content in .infobox is shown. You'll
        // want to change this based on your needs.
        .load( url, function(){
          // Content loaded, hide "loading" content.
          $( '.bbq-loading' ).hide();
        });
    }
  })
  
  // Since the event is only triggered when the hash changes, we need to trigger
  // the event now, to handle the hash the page may have loaded with.
  $(window).trigger( 'hashchange' );
  
});

$(function(){
  
  // Syntax highlighter.
  SyntaxHighlighter.highlight();
  
});

</script>
<div class="bbq">
  <div class="bbq-nav bbq-nav-top">
    <a href="#burger.html">Burgers</a> |
    <a href="#chicken.html">Chicken</a> |
    <a href="#kebabs.html">Kebabs</a> |
    <a href="#kielbasa.html">Kielbasa</a> |
    <a href="#ribs.html">Ribs</a> |
    <a href="#steak.html">Steak</a>

  </div>
  
  <div class="bbq-content">
    
    <!-- This will be shown while loading AJAX content. You'll want to get an image that suits your design at [url]http://ajaxload.info/[/url] -->
    <div class="bbq-loading" style="display:none;">
      <img src="/shell/images/ajaxload-15-white.gif" alt="Loading"/> Loading content...
    </div>
    
    <!-- This content will be shown if no path is specified in the URL fragment. -->
    <div class="bbq-default bbq-item">
      <img src="bbq.jpg" width="400" height="300">

      <h1>jQuery BBQ</h1>
      <p>Click a nav item above or below to load some delicious AJAX content! Also,
        once the content loads, feel free to further explore our savory delights by
        clicking any inline links you might see.</p>
    </div>
    
  </div>
  
  <div class="bbq-nav bbq-nav-bottom">
    <a href="#burger.html">Burgers</a> |
    <a href="#chicken.html">Chicken</a> |
    <a href="#kebabs.html">Kebabs</a> |
    <a href="#kielbasa.html">Kielbasa</a> |
    <a href="#ribs.html">Ribs</a> |
    <a href="#steak.html">Steak</a>

  </div>
</div>
Medlem sedan juni 20019 519 inlägg
#2

Kolla om du har en location.hash, om du har det så markera du den, annars gör du väl med ren HTML om menyvalet är markerat eller inte

260 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
123 ms — deklarationer (db)
0 ms — hämta statistik (cache)
133 ms — hämta tråd, inlägg och bilagor (db)
124 ms — ändringar (db)