Multiple anchor styles using classes not ID [closed] - css

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have a site that's using a two layered navigation menu. The top navigation goes to physical pages, while the filter navigation reloads the content in a div (#main) on the current page. This is done using jquery, and the "current" class style for each link is set (and hence the corresponding data is called) even on the first visit. In other words, what loads and where the "current" class style is set to is all managed by javascript and php every time.
This works beautifully Here
My problem is that the client now wants the Top Navigation to have different background colors for hover and "current" for each link.
I know I can do this with ID's.. but I'd rather do it using classes.. Is this possible?
for reference:
The css for the top nav list:
#nav_container {
position: relative;
float: left;
width: 100%;
}
#top_nav {
display: table;
table-layout: fixed;
list-style: none;
margin: 0px;
padding: 0px;
width: 100%;
font-family: mbaskerville-semibold;
overflow: hidden;
-webkit-box-shadow: 0 8px 6px -7px #666;
-moz-box-shadow: 0 8px 6px -7px #666;
box-shadow: 0 8px 6px -7px #666;
border-top: 2px solid #CCC;
border-bottom: 0.5px solid #CCC;
}
#top_nav li {
display: table-cell;
*float: left; /* improve IE7 */
height: 25px;
text-align: center;
line-height: 25px;
font-weight: bold;
border-right: 0.5px solid #CCC;
}
#top_nav li a {
display: block;
text-decoration: none;
color: #021020;
background-color: #FFFFFF;
}
#top_nav li a.current {
color: #FFFFFF;
background-color: #766A5A;
}
#top_nav li a:hover {
color: #FFFFFF;
background-color: #766A5A;
}
#top_nav li:first-child {
padding-left: 0;
border-left: 0.5px solid #CCC;
}
The javascript:
$(document).ready(function(){
// current page
var $current_page = window.location.pathname;
// top navigation
$(function() {
// set link to current page
if ( $current_page ) {
$('#top_nav a[href$="' + $current_page + '"]').attr('class', 'current');
}
// if link is root, set first child (home)
if ( $current_page.length <= 1) {
$('#top_nav a:first').addClass('current');
}
// if no filter set, set all as filter
if ($('#filter_nav a').hasClass('current')) {
// do nothing
}
else {
$('#filter_nav a:first').addClass('current');
// load new data when filter is changed
$filter = "all";
$(".page_header").load("test.php?", {page: $current_page, filter: $filter}, function(response, status, xhr) {
if(status == 'success') {
$('.page_header').html(response);
}
else if(status == 'error') {
var emsg = '<i>There was an error: ' + xhr.status + ' ' + xhr.statusText + '</i>';
$('.page_header').html(emsg);
}
else { alert(status); }
});
return false
}
});
// filter navigation
var $filter;
$('#filter_nav li a').click(
function(e) {
// prevent the default action & bubbling
e.preventDefault();
e.stopPropagation();
// handle filter change styles
$(this).closest('ul').find('.current').removeClass('current');
$(this).addClass('current');
// load new data when filter is changed
$filter = $(this).attr('href');
$(".page_header").load("test.php?", {page: $current_page, filter: $filter}, function(response, status, xhr) {
if(status == 'success') {
$('.page_header').html(response);
}
else if(status == 'error') {
var emsg = '<i>There was an error: ' + xhr.status + ' ' + xhr.statusText + '</i>';
$('.page_header').html(emsg);
}
else { alert(status); }
});
return false
});
});
The php class:
<?php
/**
* _document: /lib/omc_frmwrk/present/NavMan.php
*
* = Navigation Management class
* Management of standard navigational elements
*
* ** TO DO:
*
*
*/
// class definition
class NavMan {
/*
* class parameters
*
*/
private static $links;
private static $nav_style;
/**
* Getters
*
*/
/**
* Setters
*
*/
public static function setLinks($x) { self::$links = $x; }
public static function setNavStyle($x) { self::$nav_style = $x; }
/*
* __construct()
* PUBLIC method
* = empty
*
*/
public function __construct() {}
/*
* Navigation Menu:
* PUBLIC method
* = unordered list, css styled, dop-down capable
*
*/
public function setNav() {
// open unordered list
echo '<ul id="' . self::$nav_style . '">';
// set layer
$layer = 0;
// place array content into variables
for ($i = 0; $i < count(self::$links); $i++) {
$this_layer = self::$links[$i][0];
$class = self::$links[$i][1];
$link = self::$links[$i][2];
$page = self::$links[$i][3];
// check if layer is current
if ($layer < $this_layer) {
// open sub list
echo '<ul><li>';
// increase variable
$layer++;
}
else if ($layer == $this_layer) {
// open sub-layer
echo '</li><li>';
}
else if ($layer > $this_layer) {
// open sub-layer
echo '</li></ul><div class="clear"></li><li>';
// decrease variable
$layer--;
}
// place link
echo '<a class="' . $class . '" href="' . $page . '">' . $link . '</a>';
}
// close unordered list
echo '</li></ul><div class="clear"></div>';
}
}
?>

Answer 1

With jQuery you can use the following functions:
hasClass to check which class an element has, use it here instead of
$('#top_nav a[href$="' + $current_page + '"]').attr('class', 'current');`
addClassto add a class to a dom element
removeClass to remove a class from an element. Before you add a class, you have to first of all remove the previous one always e.g. here you did not remove the unwanted class first before adding a new one.
if ( $current_page.length <= 1) {
$('#top_nav a:first').addClass('current');
}
toggleClass to alternate between two classes.
The styling can be different depending on which class is active.
For further reading:
http://jquerybyexample.blogspot.com/2011/08/addclass-removeclass-hasclass-and.html
http://api.jquery.com/
To reference the a:hover class:
jQuery to target CSS a:hover class
http://api.jquery.com/hover/