Umschalten, Einblenden, Ausblenden. Öffne den Schieberegler und ändere den Inhalt

Als js noob, ich kämpfe einen Kampf Breite der Inhalt in einem Schieberegler. Ich habe 4 Knöpfe. Wenn ich auf eine Schaltfläche klicke, möchte ich einen Schieberegler öffnen und Inhalte einblenden. Wenn ich auf eine andere Schaltfläche klicke, möchte ich, dass der Schieberegler geöffnet bleibt, aber Inhalte ausgeblendet und neue Inhalte eingeblendet werden müssen.Umschalten, Einblenden, Ausblenden. Öffne den Schieberegler und ändere den Inhalt

Ich habe dies :

HTML

<div class="standorte-wrapper"> 
    <div class="panel left"> 
     <div class="pan-item tl"> 
     <button href="#" id="expand" class="show-hide">TOGGLE</button> 
     </div><!-- 
     --><div class="pan-item tr"> 
     <button></button> 
     </div><!-- 
     --><div class="pan-item bl"> 
     <button></button> 
     </div><!-- 
     --><div class="pan-item br"> 
     <button></button> 
     </div> 
    </div> 
    <div class="panel right"> 
    <div class="close-button"> 
     <a href="#" id="close" class="close"> 
     <i class="icon-cancel"></i></a> 
    </div> 
    <h2>Everything you need to know</h2><!-- CONTENT TO REFRESH --> 
    </div> 
    </div>

$(document).ready(function(){ 
    $("#expand").on("click", function(){ 
     $(".standorte-wrapper").toggleClass("expand"); 
    }); 

    $("#close").on("click", function(){ 
     $(".standorte-wrapper").toggleClass("expand"); 
    }); 
});

Das gibt mir dieses Ergebnis, Öffnen und Clossing

Wie kann ich die Funktionen, die ich wünsche, wie oben beschrieben hinzufügen? Der Inhalt, den ich in das Panel geladen habe, sind .php-Dateien. file1.php, file2.php, ...

Quelle

2016-12-19 user3799112

Nach unserer Zusammenarbeit auf Github poste ich hier, was wir

https://github.com/neodev2/ajax-slide-panel

<!DOCTYPE html> 
<html> 
<head> 
    <link href="style.css" rel="stylesheet"> 
    <script src="http://code.jquery.com/jquery-1.12.4.min.js"> 
    </script> 
    <script> 
     $(document).ready(function(){ 

      var ajaxUrls = [ 
       'snip1.html', 
       'snip2.html', 
       'snip3.html', 
       'snip4.html' 
      ]; 

      var ajaxFiles = []; 


      for(var i=0; i<ajaxUrls.length; i++){ 

       $.ajax({ 
        method: 'GET', 
        url: ajaxUrls[i], 
        success: function(data){ 
         //console.log(data); 
         ajaxFiles.push(data); 
        } 
       }); 

      } 

      $('.pan-item > button').on('click', function(){ 

       if($('.panel.left').hasClass('open')){ 
        //alert('already open'); 
       }else{ 
        $('.panel.left').addClass('open'); 
        $('.standorte-wrapper').addClass('expand'); 
       } 

       $('#php-content').html(ajaxFiles[$(this).attr('data-ajaxFile')]); 

      }); 


      $('#close').on('click', function(){ 

       $('.panel.left').removeClass('open'); 
       $('.standorte-wrapper').removeClass('expand'); 

      }); 

     }); 
    </script> 
    <title></title> 
</head> 
<body> 
    <div class="standorte-wrapper"> 
     <div class="panel left"> 
      <div class="pan-item tl"> 
       <button data-ajaxfile="0">X</button> 
      </div> 
      <div class="pan-item tr"> 
       <button data-ajaxfile="1">X</button> 
      </div> 
      <div class="pan-item bl"> 
       <button data-ajaxfile="2">X</button> 
      </div> 
      <div class="pan-item br"> 
       <button data-ajaxfile="3">X</button> 
      </div> 
     </div> 
     <div class="panel right"> 
      <div class="close-button"> 
       <a class="close" href="#" id="close"><i class="icon-cancel">X</i></a> 
      </div> 
      <div> 
       <h2>Everything you need to know</h2> 
       <div id="php-content"></div> 
      </div> 
     </div><span class="clear"></span> 
    </div> 
</body> 
</html>

bisher tat

Quelle

2016-12-20 12:58:08 neoDev

Umschalten, Einblenden, Ausblenden. Öffne den Schieberegler und ändere den Inhalt

Antwort

Verwandte Themen