2014-11-21 3 views
0

내가 4 DIV 년대와 페이지가 내가 탭처럼 사용되는 어떠한 버튼 클릭을 기반으로하지 jQuery를 사용하여/쇼를 숨겨 ... 대부분의 작업을 위해는 자바 스크립트/JQuery와 세션 처리 또는 세션 상태

는 더 RUNAT 서버가없는 그래서 탭이 잘 작동 ...

서버가 실행되는 경우, 탭은 다시 원래 상태로 포스트 백 (back-back ...)으로 기본 설정됩니다. 어떻게 클라이언트 측 세션 처리를 사용하여 현재 탭을 유지할 수 있습니까? Jquery 또는 Javascript를 사용하여로드하는 중입니까? (이 부서의 서버는 runat 서버가 아니기 때문에 게시물의 서버 쪽에서 공개 설정을 변경하지 못하게 할 수 있습니다.)

각 클릭에 추가 할 수있는 코드 줄은 궁금합니다. 고유 한 세션/로컬 변수를 설정하는 함수. 그 어떤 의미가 만약 내가 .... 현재 선택된 해당 탭에 표시 숨기기를 설정합니다 document.ready 함수에 추가 할 수있는 코드의 줄 ...

 $(document).ready(function() { 

     $("#btnTabOperator").click(function() { 
      //Sets the appropriate div to show...hides all the rest 
      $("#OperatorInfo").show(); 
      $("#OperatorProGrowth").hide(); 
      $("#OperatorCertExams").hide(); 
      $("#OperatorScanned").hide(); 
      //sets the selected button to gold, and the unselected to whitesmoke color 
      $("#btnTabOperator").css("background-color","goldenrod"); 
      $("#btnTabProGrowth").css("background-color", "whitesmoke"); 
      $("#btnTabCertAndExams").css("background-color", "whitesmoke"); 
      $("#btnTabScannedFiles").css("background-color", "whitesmoke"); 

     }); 
     $("#btnTabProGrowth").click(function() { 
      $("#OperatorInfo").hide(); 
      $("#OperatorProGrowth").show(); 
      $("#OperatorCertExams").hide(); 
      $("#OperatorScanned").hide(); 

      $("#btnTabOperator").css("background-color", "whitesmoke"); 
      $("#btnTabProGrowth").css("background-color", "goldenrod"); 
      $("#btnTabCertAndExams").css("background-color", "whitesmoke"); 
      $("#btnTabScannedFiles").css("background-color", "whitesmoke"); 

     }); 
     $("#btnTabCertAndExams").click(function() { 
      $("#OperatorInfo").hide(); 
      $("#OperatorProGrowth").hide(); 
      $("#OperatorCertExams").show(); 
      $("#OperatorScanned").hide(); 

      $("#btnTabOperator").css("background-color", "whitesmoke"); 
      $("#btnTabProGrowth").css("background-color", "whitesmoke"); 
      $("#btnTabCertAndExams").css("background-color", "goldenrod"); 
      $("#btnTabScannedFiles").css("background-color", "whitesmoke"); 

     }); 
     $("#btnTabScannedFiles").click(function() { 
      $("#OperatorInfo").hide(); 
      $("#OperatorProGrowth").hide(); 
      $("#OperatorCertExams").hide(); 
      $("#OperatorScanned").show(); 

      $("#btnTabOperator").css("background-color", "whitesmoke"); 
      $("#btnTabProGrowth").css("background-color", "whitesmoke"); 
      $("#btnTabCertAndExams").css("background-color", "whitesmoke"); 
      $("#btnTabScannedFiles").css("background-color", "goldenrod"); 

     }); 
    }); 
</script> 

답변

0

간단한 해결책 서버 왕복없이 탭 상태를 저장하고 검색하기 위해 쿠키를 사용하고 있습니다.
UPDATE : 예를 들어
당신이 당신의 위 각 블록에이 줄을 삽입 할 수

$.cookie("activeTab", tabID); 

페이지가로드 될 때 :

var tab_id_= $.cookie("activeTab"); 
     $("#"+tab_id_).show(); 
+0

의 날 오류를 던지는 말은하지 않습니다 $ .cookie를 인식합니다. 그래서 나는 '입력'컨트롤을 넣고 숨기는 것으로 생각합니다. 탭 클릭에 따라 값을 설정하고 페이지가로드 될 때마다 값을 검색하고 해당 값을 기반으로 적절한 div를 숨기거나 표시합니다. – user2784648

+1

플러그인을 언급하는 것을 잊어 버렸습니다. https://github.com/carhartl/jquery-cookie – elsadek