Hice una Navigation Bar que contiene un inicio de sesión, por lo que quiero cambiarlo con un div (contener imagen y nombre de usuario), cuando el usuario inicie sesión.
Barra de navegación:
<div class="collapse navbar-collapse" id="axit-nav"> <ul class="nav navbar-nav navbar-right"> <li><a> <button id="myButton">Create event</button></a></li> </ul> <ul class="nav navbar-nav navbar-left"> <li><a class="dsctv hidden-xs hidden-sm">events</a></li> <li><a class="dsctv hidden-xs hidden-sm">Login</a></li> <li><img alt="Logo brand Wevento" class="navbar-brand hidden-xs hidden-sm" src="theme/img/logos/Logo%20White%20Blue.png" </li> </ul> </div>Código PHP:
<?php session_start(); if (isset($_SESSION['Mail'])) { header('Location: admin/index.php'); } include 'admin/init.php'; // Check for ADMINS if($_SERVER['REQUEST_METHOD'] == 'POST'){ $mail= $_POST['mail']; $password= $_POST['password']; $hashedPass= sha1($password); // check if the user exist in DB $stmt = $conn->prepare("SELECT Mail, Password FROM admin WHERE Mail= ? AND Password = ? "); $stmt->execute(array($mail, $hashedPass)); $count = $stmt->rowCount(); if($count > 0) { $_SESSION['Mail'] = $mail; } } ?>Debe escribir un cheque para confirmar si la sesión existe. En caso afirmativo, muestre el nombre de usuario, si no, muestre el enlace de inicio de sesión. Algo como esto:
<div class="collapse navbar-collapse" id="axit-nav"> <ul class="nav navbar-nav navbar-right"> <li><a> <button id="myButton">Create event</button></a></li> </ul> <ul class="nav navbar-nav navbar-left"> <li><a class="dsctv hidden-xs hidden-sm">events</a></li> <?php if (!isset($_SESSION)) { ?> <li><a class="dsctv hidden-xs hidden-sm">Login</a></li> <?php } else { ?> <li><a class="dsctv hidden-xs hidden-sm"><?php echo $_SESSION['user_name'];?></a></li> <?php } ?> <li><img alt="Logo brand Wevento" class="navbar-brand hidden-xs hidden-sm" src="theme/img/logos/Logo%20White%20Blue.png" </li> </ul> </div>Por supuesto, repite el nombre de usuario en función de cómo lo almacenó en la sesión.
Si está utilizando jQuery, creo que puede editar con el método .css() .
Algo como
$('your-element').click(function () { $(this).css('background', '#000'); };Documentación del método jQuery .css(): http://api.jquery.com/css/