CODEWITHSUNDEEP
phphtmlcsswordpress
DeSoto
DeSoto

Reputation: 100

PHP list highlight current item

I have a ul list that is rendered in PHP and I am trying to highlight the current selected item. The code is part of a tag sorting jquery portfolio. I have tried to add a current class to the li element but that only works for the default element "All".

PHP-code

if ($unique_tags_arr) {
            echo '<ul class="jquery">';
            echo '<li data-filter=".filterable">';
            echo "All";
            echo '</li>';
            foreach ($unique_tags_arr as &$value) {
                echo '<li data-filter=".'.str_replace(' ', '', $value). " " .'"> '.$value.'</li>'; 

            }
            echo '</ul>';
        }

Upvotes: 0

Views: 451

Answers (3)

mMoovs
mMoovs

Reputation: 934

I'm guessing there's no page load when filtering because your list items have the data-filter attribute and therefore I'd guess it's using jQuery. Then you should use something like gbestard suggested.

But if there's page load and you are using PHP on this like your tags say... You'll need the selected item value stored somewhere (POST, GET etc.) and with your stored selected item you need to compare if any of the array items has the same value and if it is, just add class "selected".

This is with GET so your selected value would be in the url.

$active = $_GET['selected_filter'];

if ($unique_tags_arr) {
    echo '<ul class="jquery">';
    echo '<li data-filter=".filterable">';
    echo "All";
    echo '</li>';
    foreach ($unique_tags_arr as &$value) {
        echo '<li data-filter="'.str_replace(' ', '', $value).'" ';
        if ($value == $active) { echo 'class="selected"'; }
        echo '> '.$value.'</li>'; 
    }
    echo '</ul>';
}

Then just give styles to the .selected class.

Upvotes: 0

Howli
Howli

Reputation: 12469

You can try with the following css style.

.jquery li:hover
{
    color: #000;
    background: #fff
}

Upvotes: 1

gbestard
gbestard

Reputation: 1177

Try this

jQuery(document).on("click", "ul.jquery > li", function() {
                    var $this = jQuery(this);
                    jQuery(".highlight").removeClass("highlight");
                    $this.addClass("highlight");
                });

and then write a css rule for the highlight class

Upvotes: 1

Related Questions