logo
down
shadow

switch class in jQuery/JavaScript for active/inactive state


switch class in jQuery/JavaScript for active/inactive state

Content Index :

switch class in jQuery/JavaScript for active/inactive state
Tag : javascript , By : Giles
Date : January 12 2021, 08:33 AM

wish helps you If you want to go with 2 classes: at first we should get rid of both of the classes, then set the default inactive state for elements and then set active state for the element where the click occured. Try this code:
$(document).ready(function() {
    $("#sidebarmenu a").on("click", function() {
        $(this).parents("#sidebarmenu").find("a").removeClass("activebtn inactivebtn").addClass("inactivebtn");;
        $(this).removeClass("inactivebtn").addClass("activebtn");
    });
});
  .activebtn{
  opacity: 1;
  text-align: center;
}

.inactivebtn{
  text-align: center;
  opacity: .5;
  transition: opacity .5s ease-out;
  -moz-transition: opacity .5s ease-out;
  -webkit-transition: opacity .5s ease-out;
  -o-transition: opacity .5s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebarmenu">
      <h1><a class="activebtn" href="#">Sign In</a></h1>
      <h1><a class="inactivebtn" href="#">Sign Up</a></h1><br><br>
</div>

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

Tag : jquery , By : Vodkat
Date : March 29 2020, 07:55 AM
seems to work fine You could have CSS do it for you.
Each div could be a background image of any menu item, which could also allow you to have text over it.
<div class="nav home"><a href="index.php">Home</a></div>

<script>
jQuery('.nav').click(function() {
    jQuery(this).css("background-image",jQuery(this).css("background-image").replace("on","clicked");
});
<script>

<style>
.nav {
    float: left; 
    height: 45px; 
    width: 73px;;
}

.home {
    background-image: url("images/nav/home_off.png");
    }

.home:hover {
    background-image: url("images/nav/home_on.png");
    }

</style>

Make the selected tab active and remaining inactive using pure javascript not jquery


Tag : javascript , By : nobodyzzz
Date : March 29 2020, 07:55 AM
I hope this helps . You can unset background of all the tabs first and then add the background color to the selected tab like this:
 function showActiveTab(item)
  {
    var el = document.getElementsByTagName("LI");

    // Unset background color of all tabs to white
    for (var i = 0, len = el.length; i < len; i++) {
      el[i].style.background="white";
    }
    // Add background color of selected tab to green
    item.style.background="green";
  }

How to change/update Dynamics crm entity record data and state from Active to Inactive with Javascript


Tag : javascript , By : afarouk
Date : March 29 2020, 07:55 AM
hop of those help? The problem was a wrong Values that I sent to dynamics. In Microsoft Support page are set wrong values.
  var request = "" +
    "<s:Envelope xmlns:s='http://schemas.xmlsoap.org/soap/envelope/'>" +
    "    <s:Header>" +
    "        <SdkClientVersion xmlns='http://schemas.microsoft.com/xrm/2011/Contracts'></SdkClientVersion>" +
    "    </s:Header>" +
    "    <s:Body>" +
    "        <Execute xmlns='http://schemas.microsoft.com/xrm/2011/Contracts/Services' xmlns:i='http://www.w3.org/2001/XMLSchema-instance'>" +
    "            <request i:type='b:SetStateRequest' xmlns:a='http://schemas.microsoft.com/xrm/2011/Contracts' xmlns:b='http://schemas.microsoft.com/crm/2011/Contracts'>" +
    "                <a:Parameters xmlns:b='http://schemas.datacontract.org/2004/07/System.Collections.Generic'>" +
    "                    <a:KeyValuePairOfstringanyType>" +
    "                        <b:key>EntityMoniker</b:key>" +
    "                        <b:value i:type='a:EntityReference'>" +
    "                            <a:Id>" + RECORD_ID + "</a:Id>" +
    "                            <a:LogicalName>concep_emailcampaign</a:LogicalName>" +
    "                        </b:value>" +
    "                    </a:KeyValuePairOfstringanyType>" +
    "                    <a:KeyValuePairOfstringanyType>" +
    "                        <b:key>State</b:key>" +
    "                        <b:value i:type='a:OptionSetValue'>" +
    "                            <a:Value>1</a:Value>" +   //<----------
    "                        </b:value>" +
    "                    </a:KeyValuePairOfstringanyType>" +
    "                    <a:KeyValuePairOfstringanyType>" +
    "                        <b:key>Status</b:key>" +
    "                        <b:value i:type='a:OptionSetValue'>" +
    "                            <a:Value>-1</a:Value>" +   //<----------
    "                        </b:value>" +
    "                    </a:KeyValuePairOfstringanyType>" +
    "                    <a:KeyValuePairOfstringanyType>" +
    "                        <b:key>MaintainLegacyAppServerBehavior</b:key>" +
    "                        <b:value i:type='c:boolean' xmlns:c='http://www.w3.org/2001/XMLSchema'>true</b:value>" +
    "                    </a:KeyValuePairOfstringanyType>" +
    "                </a:Parameters>" +
    "                <a:RequestId i:nil='true' />" +
    "                <a:RequestName>SetState</a:RequestName>" +
    "            </request>" +
    "        </Execute>" +
    "    </s:Body>" +
    "</s:Envelope>";

How to display the inactive state of the on switch


Tag : java , By : janik
Date : March 29 2020, 07:55 AM
I hope this helps . I want to display inactive state when internet no connection, like on screen. How can I do it? , You can use method:
public void setEnabled (boolean enabled)

How to determine app is in active state or inactive state ios?


Tag : ios , By : Mariamario
Date : March 29 2020, 07:55 AM
Related Posts Related QUESTIONS :
  • Capturing TAB key in text box
  • How to set CSS background color of HTML using JavaScript
  • How can I make the browser see CSS and Javascript changes?
  • redux how to use state
  • All data in the db is lost when closing a express based node js server
  • How to convert javascript code for Angular
  • XPath select on child nodes
  • Idle event on mouse move - how to stop script permanently on mouse move
  • Why do I get logic is not defined in this code
  • When I enter a number in the input, the first function starts
  • ES6 imports and node_modules hell
  • How to get css selector of clicked-on element?
  • How to auto input MySQL data (input column 1 data to auto input column 2 data with same column) in php?
  • Appending to Datalist Via Javascript
  • Customizing Material-UI Components with Styled-Components
  • Populate elements with class name using Javascript
  • How to execute promises in batches (first resolving 10, then next 10 and so on)
  • Maximo JS automation script: "importPackage" is not defined
  • How to surround selected text inside textarea with <em> on key combination CTRL+i?
  • Your configured registry does not support audit requests ~ On npm audit
  • What's the Angular equivalent of Vue <slot/>?
  • Iconify icon not updating when "data-icon" set with setAttribute()
  • Javascript newbie stuck with XMLHttpRequest return data
  • How to add obj to to state in my example Redux React
  • Loading "grunt-karma.js" tasks...ERROR >> SyntaxError: Unexpected identifier
  • Why do I get log is not defined
  • get the multiple index of the same string
  • How can I iterate over an Array object by using For IN or FOR OF
  • Launch local executable from web browser
  • How to prepare array of json objects to d3 hierarchical tree structure
  • VueJS - event emitted - show HTML before other calculations
  • Export SASS/SCSS variables to Javascript without exporting them to CSS
  • How to attach an event handler only once continuously
  • How to make button open a link in new tab in JavaScript?
  • Find range from the javascript object
  • How can I use my jQuery code as JavaScript?
  • How to show 5 images in a 2 row slider with bxslider
  • How to convert stream into variables in typescript
  • Three.js custom shader error on Chrome GL_INVALID_OPERATION: Active draw buffers with missing fragment shader outputs
  • My JavaScript doesn't work. How can I solve this problem?
  • Why is this async function is running synchronously?
  • Get updated variable from within react hook before return
  • I want to show all image preview but whenever I upload a new one the old one is gone
  • Would I be able to give access to specific electron APIs safely?
  • Why several clicks fire for each instance of a Class?
  • cant grab value from div using attr()
  • Make web service not accessible by browser?
  • Select DOM elements within template
  • How to customize angular ui-grid row background color?
  • Binding data in two respective $scope in AngularJS, how?
  • react put some props after import class
  • Variable is distributed among same components
  • How To Track Outbound Clicks Using Javascript
  • How to get total seconds elapsed since the beginning of the month?
  • Protractor: Stale element reference at "browser.wait(EC.visibilityOf(confDial), FIFTY_SECONDS);"
  • Access to an array inside an object
  • Reseting an JavaScript Interval with different value?
  • Learning Angular for the first time - version 2 or 4?
  • Rendering RSS feed (XML) in React with jquery, why do object values parsed from the feed seem empty?
  • Node.js xml2js http.request tag matching
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com