Change layout according to each button

Asked

Viewed 251 times

0

I’ve seen many sites that change the background according to which user choose right?

However it would be possible for me to change the content of the site according to the button the user clicks?

Example : I have a page that displays a popup "Este acesso é pessoa física ou jurídica ?" If clicked Física displays a content, if clicked Jurídica the popup will be closed and the current content will be displayed.

I have walked halfway, I have the popup displaying the message, and if the user clicks on jurídica the popup closes if it clicks on Fisíca redirects to a url.

Ps: I know it got really big, but I tried to pass on every possible detail. I’m using Bootstrap

LINK UPADO ON THE WEBSITE

javascript html bootstrap

  • There are millions of ways to do this, you need to be clearer on the following points, what exactly needs to be different according to the option and MAINLY, post the code of what you have already done...without this is all very relative and comprehensive...

  • @Kennyrafael Apologies if my question did not add clearly, however I was clear yes "If clicked Physics displays a content" but to answer you, would display a page with images, texts, layout, aimed at a physical person.

  • It would help us if you could create a Fiddle so we can view your code

  • @Lucascosta Follow the link in the post. upado on the company website a Christmas campaign. I did not post the code as it has bootstrap is many files

  • Now that we have the page, could inform in which areas you want to change according to the user’s choice?

  • @Thaleschemenian spoke to the front-end. It would be the texts, and the layout style

  • @Lucasbicalleto, all people are asking for in the comments are the information I was referring to, if it was really clear everyone would have answered without needing anything. It was clear your need, what you didn’t make clear, was exactly what actions and what content you have, this is a community so that any and all content is useful to EVERYONE, and not just the solution to your problem, therefore the need to be clear and preferably within the question.

Show 2 more comments

2 answers

1

You can create the properties for both style classes in your stylesheet (CSS) and change the class name using Javascript in real time.

var r = confirm("Cliquei:\nOK para Pessoa Físca\n CANCEL para Pessoa Jurídica");
if (r) {
    document.getElementById("formulario").className = "pf";
} else {
    document.getElementById("formulario").className = "pj";
}
.pf {
  background-color: red;
}

.pj {
  background-color: blue;
}
<div id="formulario">Formulário</div>

0

When accessing the page I noticed that you use jQuery, which already makes it easier, as you have already done the click and managed to identify which user already clicked, I will put only some methods that can help you:

To change the texts you can use the method .text();

To add classes .addClass() and remove .removeClass();

To change the CSS .css();

To hide elements.hide() to show .show()

To remove .remove()

Basically that’s it, everyone is simple and easy to use and I believe they will meet your need.

Browser other questions tagged javascript html bootstrap

You are not signed in. Login or sign up in order to post.