How can I change a CSS class of an HTML element in response to a changing page using PHP?
I already got the solution exactly like in this but this solution is for Javascript.
Basically, I want to add additional class when a certain IF condition is met.
This is my code.
<li <?php if ($selected == "profile") echo 'class="active"'; ?> class="dropdown">
Profile
</li>
From my code, you can see that the <li> already got a class in it. So, when I echo another class in IF condition, it completely change to the class in IF condition.
What I need is an extra class, not different class. How can I do that?
Just move it?
<li class="dropdown<?php if ($selected == "profile") echo ' active'; ?>">
This results in class="dropdown active", which is perfectly fine in HTML - you can have multiple space-separated classes on an element. All CSS rules targeting either of the two will be applied, and you can even combine them to require both:
li.active.dropdown {
/* Underline active dropdown elements */
text-decoration:underline;
}
<li class="dropdown <?php if ($selected == "profile") echo 'active'; ?>">
Profile
</li>
try this
You can try this :
<li class="<?php if ($selected == "profile") echo 'active'; ?> OTHER CONDITION HERE ">
Profile
</li>
Related
I would like to have an if/then argument for 2 classes (from the css) for a menu item. One where the menu item is blue if it is NOT the active page, and one where the menu item is red if it IS the active page. I have figured out the active page portion, now I am trying to figure out the if it is not active portion. I hope that makes sense. I have included a code snippit below.
<ul class="menu ul">
<li><a class="Blue <?php if($page =='home'){echo 'active';}?>" href="../index.php" >Home</a></li>
I have tried multiple variations, however I cannot figure it out. Thanks for your help!
Oleksandr is correct: It's better to have your links styles blue by default and overwrite it with the active class.
If you would want to give a hyperlink either one class or the other based on a simple condition, I would recommend this syntax:
<ul class="menu ul">
<li>
<a class="<?= $page == 'home' ? 'active' : 'Blue' ?>" href="../index.php" >Home</a>
</li>
</ul>
The example above uses the ternary operator and the echo shortcut syntax, and simply echoes one of two values based on the outcome of the condition.
as far as I understood you want to add different classes to link depending on $page variable.
for this i would recommend you to just use else statement
<ul class="menu ul">
<li><a class="<?php if($page =='home'){echo 'Blue';}else{echo 'Red';} ?>" href="../index.php" >Home</a></li>`
However it would be much better to check state of $page somewhere up (to not make spagetti code). And then echo only class in the a element.
<?php if($page =='home'){$menu_class='Blue';}else{$menu_class= 'Red';};?>
<ul class="menu ul">
<li><a class="<?php echo $menu_class; ?>" href="../index.php" >Home</a></li></pre>
I know the title is kinda vague, sorry. I could'nt express it easily in one statement. So, anyways.
I'm currently working on my Personal Website. I wanted to have the nav element for the current page to be highlighted a certain color. To do so I wanted to use this:
<a href="index.php" class="nav-item" <?php if($current =='home'){echo 'class = "active"';}?>>Home</a>
and the same thing for the other pages. However, "class = "active" is not even being applied to the a tag. My Index pages contains this:
$current = "home";
and the css for the active class looks like this:
.active{
background-color: #fdfdfd !important;
color: #3D1c4B;
}
I seriously don't know what I'm doing wrong. Is there something I'm missing or is this just something I can't do with an a element?
Here is what the nav looks like
You can't have multiple class tags, you already have one you can't add a second. Try this:
Home
Your HTML is invalid, and would render: <a href="index.php" class="nav-item" class="active"> - which has two class attributes (not legal). Modify your PHP like below, to put both classes in the same attribute:
Home
You are writing class attribute two times in <a> tag
<a href="index.php" class="nav-item" <?php if($current =='home'){echo 'class = "active"';}?>>Home</a>
it should be like
<a href="index.php" class="nav-item <?php if($current =='home'){echo
' active'; }?>" >Home</a>
Get the class in a variable and use it like this:
<?php
$className = '';
if($current =='home'){
$className = 'active';
echo "<a href='index.php' class='nav-item " . $className . "'>Home</a>";
?>
First, I see your using:
<a href="index.php" class="nav-item" <?php if ( $current =='home' ) echo 'class = "active"'; ?> >Home</a>
is wrong, since you will get class="nav-item" class="active", - instead you need to write:
<a class="nav-item <?php if ( $current =='home') echo 'active'; ?>" href="index.php">Home</a>
your code will add 2 classes so that only one class will be applied to your tag.
try like this.
Home
<ul class="nav nav-pills nav-stacked project-body" style="background-color: white">
<?php foreach($get_policies as $policies) : ?>
<li role="presentation" class="<?php echo $policies['policies_id'] == $policies_id ? "active" : "" ?>"><?php echo $policies['policies_title'] ?>
</li>
<?php endforeach; ?>
</ul>
i have the above code snippet, where i can display all the policies in vertically. Now i want the first policies should be loaded to the while loading the page. make the class active by default with policies loaded.
You can use nth-child for doing this
$('.project-body li:first-child').addClass('active');
You can use jquery to check if li have active class, get href then use window location.href:
if($('.project-body li').hasClass('active'))
{
window.location.href = $(this).attr('href');
}
In php way
Assuming your URL is
<?php echo base_url().'policies/index/'.$policies['policies_id'] ?>
When you click on the <li> link, to get the polilcies_id from the URL you can use $this->uri->segment(n); // n=1 for controller, n=2 for method, etc
for example
localhost/policies/index/4 where 4 is the policies_id, this->uri->segment(3)
<li role="presentation" class="<?php echo $policies['policies_id'] == this->uri->segment(3) ? "active" : "" ?>"> YOUR LINK </li>
I am using html navigation panel,
below is one of example of open tab.
<li class="nav-item active open">
Now, i want 'active open' to be applied when my url contains \testing\one.
I could get that url by using php code below, i am using codeigniter.
<?php echo $this->uri->uri_string();?>
I can compare it with if statement, but my main question is how can i put this php if condition in
<li></li>
Thanks,
You can do this way -
<li <?php echo ($this->uri->uri_string() === 'value') ? 'class="nav-item active open"' : '' ?>>
<li class="nav-item <?php if($this->uri->uri_string() === 'Value') { echo 'active open' } ?>" ></li>
I want to change the class of two tabs via PHP, but I am stuck in basic condition. here is my code:
CSS
.myinfo { background-color:black }
.deactive { background-color : white }
HTML
<li class="myinfo <?=$deact?>">
<a href="myaccount.php?<?=$qry_str?>" >My Info</a>
</li>
<li class="myinfo <?=$deact?>">
My Contacts
</li>
What I need is
if $_GET['mycontacts'] is active
then My Info link should have class deactive
otherwise My Contacs link should have class deactive
I tried this:
if (isset($_GET['mycontacts'])){
$deact ='deactive';
}
But it did not succeed. Please help to write this condition (I think a one line ternary condition could work).
Try this:
<li class="myinfo <?php echo ($_GET['mycontacts'] === 'active' ? 'deactive' : '') ?>">
<a href="myaccount.php?<?=$qry_str?>" >My Info</a>
</li>
<li class="myinfo <?php echo ($_GET['mycontacts'] !== 'active' ? 'deactive' : '') ?>">
My Contacts
</li>
By the way I hate php short tags! Personal preference...