javascript - How To Hide an HTML object in JSP? - Stack Overflow

admin2025-04-20  0

i want know if there is a way to hide html objects in jsp..for e.g., i have a homepage with login and register button in my jsp app.I want to hide them after successful login.

here is the of screenshot of my homepage
.jpg

i want know if there is a way to hide html objects in jsp..for e.g., i have a homepage with login and register button in my jsp app.I want to hide them after successful login.

here is the of screenshot of my homepage
https://i.sstatic/LxVkX.jpg

Share Improve this question asked May 19, 2016 at 19:59 ZubZub 8263 gold badges12 silver badges23 bronze badges 1
  • 2 Possible duplicate of How to hide elements without having them take space on the page? – Mick Mnemonic Commented May 19, 2016 at 20:01
Add a ment  | 

3 Answers 3

Reset to default 3

There are many of ways you can implement that.Couple of them would be

  1. If you are reloading the whole page when user has successfully logged in, you can use JSTL to selectively render ponents.

ie, something like below.

  <c:if test="if_user_has_not_logged_in">
       <!-- HTML code for login and register button goes here-->
  </c:if>
  1. you can hide html ponents using simple Javascript as well By setting Style-> display as none. something like below

      //You invoke this code when user is logged in
      if('successfully_logged_in') {
       document.getElementById("divIdGoesHere").style.display = "none";
     }
    

If you want to hide html object you can select object with id or class for example, and use .hide();

For example:

$("#some-id").hide();
$(".some-id").hide();

Assume that you have two elements a checkbox ( with id and class nmed c_box ), and a text item ( with id and class named txt1 ).

Then the following JQuery code may be used to show/hide txt1 whenever unchecked / checked :

<html>
<head>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.c_box').click(function(){                
        if (document.getElementById('c_box').checked) {    
          $('.txt1').hide();          
        }
        else
        { 
          $('.txt1').show();                  
        }
    });
});
</script>
</head>
<body>

<input type="checkbox" id ="c_box" class="c_box"></input>
    
<input type="text" id ="txt1" class="txt1" value="M y  t e x t"></input>

</body>
</html>

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745112890a285684.html

最新回复(0)