how to enable an css property for the ajax tab panel using javascript

Question

i am using asp.net ajax tab container[ which has 2 tab panel] under each tab panel i have an div tag. now by default.i have my Activetabindex="0"

now i need to enable css property for the div tag using javscript so that there is no post back happening. i doing like this css property for the tab panel 1 is not getting applied this is my script what i doing. if i do the same thing in code behind for the ta selected index change it works. but thatcause an post back. now i need to do it my javscript only

OnClientActiveTabChanged="PanelClick"

<script type="text/javascript" language="javascript">
           function PanelClick(Sender, e) {
               debugger;
               var CurrentTab = $find('<%=Tab1.ClientID%>');
             if(  Sender._activeTabIndex==0) {
                 debugger
                 document.getElementById('<%=mycustomscroll2.ClientID%>').className = '';
                 document.getElementById('<%=mycustomscroll2.ClientID%>').Enabled = false;
                 document.getElementById('<%=mycustomscroll.ClientID%>').className = 'flexcroll';

             }
             if (Sender._activeTabIndex == 1) {
             debugger
             document.getElementById('<%=mycustomscroll.ClientID%>').className = '';
             document.getElementById('<%=mycustomscroll.ClientID%>').Enabled= false ;
              document.getElementById('<%=mycustomscroll2.ClientID%>').className = 'flexcroll';
             }

           }

       </script>

so how to i enable my css property for the div using javascript for the tab panel anyhelp would be great thank you

Answer 1

Here is a javascript function which will sort of do what you want:

function PanelClick(Sender, e) {
  var scroll1 = $get('<%=mycustomscroll.ClientID%>');
  var scroll2 = $get('<%=mycustomscroll2.ClientID%>');
  if(Sender._activeTabIndex == 0) {
    scroll1.setAttribute('class', 'flexcroll');
    scroll2.setAttribute('class', '');
  } else if(Sender._activeTabIndex == 1) {
    scroll1.setAttribute('class', '');
    scroll2.setAttribute('class', 'flexcroll');
  }
}

There really is no such thing as "enabled" in HTML and JavaScript. HTML has a "disabled" attribute, but it only applies to these elements: button , input , optgroup , option , select and textarea . It is used like so:

<input type="text" name="txtSomething" id="txtSomething" disabled="disabled">

and in JavaScript, similar to setting the class attribute, above:

$get('txtSomething').setAttribute('disabled','disabled'); // disable the input
$get('txtSomething').setAttribute('disabled',''); // enable the input

But this will not work for other elements like <div> and <span> tags.