Delete background when the user executes the script

Question

Delete background when the user executes the script

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

I'm trying to make a "dynamic" background, the idea is:

The index.html has to have a background, this background must have an image, like a logo. This logo must appear until the user tries to navigate and access a link, this link will call an internal script that will load a content within the div result.

The problem I can not make this happen, until now I get to the vice versa, but of course not what I'm looking for.

Here is the html code.

<!--CSS-->

body {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
	margin-left:auto;
    margin-right:auto;
	-webkit-font-smoothing: antialiased;
	background-image: url("imagenes/logo.jpg");
	background-size: 25%;
    background-repeat: no-repeat;
    background-attachment: fixed;
   	background-position: center; 
	border-style: solid none none none;
}

<!--HTML-->

    <body>
<div class="navigation-wrapper">
  <div class="container">
    <div class="navigation">
      <div id="main-menu-container">
        <div id="main-menu" class="nav">
          <li class="menuparent">
            <a>MENU</a>
            <ul class="sub-menu">
              <li><a id="page7">First option, same block</a></li>
              <li><a id="page9">Second option, same block</a></li>
              <li><a id="page10">Third option, same block</a></li>
            </ul>
          </body>

<!-- El Script -->

<div id="result">
    <script src="./docu2_files/jquery.js" type="text/javascript">
    </script>        
</div>

jquery html css

asked by José Vieiros 28.02.2017 в 23:37

source

2 answers

Write on the keyboard on android with the API Problem when interacting with dict Python

score 1 · Answer 1

If you want to make a change in the css of an element with a jQuery event, it's more than enough.

$("#elementoQueDisparaElEvento").click(function(){
    $("#elementoAlQueLeQuieresCambiarElBackground").css("background", "red"); //Hará que cuando des clic en el elemento que dispara el evento (puedes ser cualquiera, digamos un li) el background de tu elemento cambiará a colo rojo.
});

score 0 · Answer 2

If I understood correctly, this could be one of several ways to do it, using jQuery.

HTML and CSS have to adapt it to your needs ...

DEMO

$( "#clickme" ).click(function() { 
     $('.main-content').addClass("hide-bg");
});

<!--Código CSS:-->

.mainPage {
	width: 100%;
	float: left;
}

.main-content {
	background:  url('https://previews.123rf.com/images/tundephoto/tundephoto1003/tundephoto100300111/6647645-sample-background-Stock-Photo.jpg')
		no-repeat center;
	width: 600px;
	height: 450px;
	margin: 0 auto;
}

.main-content.hide-bg {
    background: none;
}

.text-content {
    padding-top: 50px;
}

<!--Código HTML:-->
<script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
<body>
	<div class="mainPage">
		<div class="main-content">
			<div id="clickme" class="text-content">
        <ul>
            <li><a href="#">Uno</a></li>
            <li><a href="#">Dos</a></li>
            <li><a href="#">Tres</a></li>
         </ul>
			</div>
		</div>
	</div>
</body>


<!--Código jQuery (librería Javascript):

Simplemente, al hacer click, se agrega la clase 'hide-bg' a la clase 'main-content', que ejecuta 'background: none;', ocultando la imagen de fondo.-->