Question

i created a sub category sorting menu in my woo commerce shop pages. i want to make the that links to the page i'm inside right now to be colored in red. i don't have a problem with the css just with the js script. how can i make it highlight the current ? this is the sorting menu i created: 让我们说这是ul im使用：

<ul class="wooc_sclist" id="catmenu">
<li class="category " ><h2><a href="..." class="...">Bla</a></h2></li>
</ul>

这就是我创建排序菜单的方式：

function tutsplus_product_subcategories( $cat) {
$parentid = $cat->term_id; 
$args = array(
    'parent' => $parentid
);
$terms = get_terms( 'product_cat', $args );

if ( $terms || is_subcategory() ) {

    echo '<ul class="wooc_sclist" id="catmenu">';

        foreach ( $terms as $term ) {

            echo '<li class="category " >';                 

                echo '<h2>';
                    echo '<a href="' .  esc_url( get_term_link( $term ) ) . '" class="' . $term->slug .'">';
                        echo $term->name;
                    echo '</a>';
                echo '</h2>';

            echo '</li>';


        }

        echo '</ul>';
    }
}

Answer 1

在wordpress中，当您选择菜单时，您将拥有class current_page_item。您可以在此处设置<a>的颜色

.current_page_item a{color: #xxxxxx;}

如果你想在悬停时设置颜色

.category a:hover{color: #xxxxxx;}

Answer 2

你可以使用这样的jquery是header.php或footer.php文件

<script>
    jQuery(document).ready(function(){
    jQuery('.current_page_item').css('color','red');
    });
</script>

Answer 3

使用jQuery hover，您可以切换锚点的颜色。

使用jQuery on click，您可以处理点击事件。在click处理程序中，您可以使用e.preventDefault（）;避免跳转到另一页。

使用$（this）.index（），您可以测试该元素是否是列表中的第一个元素。

使用$（this）.find（＆＃39; a＆＃39;）。toggleClass（＆＃39; active＆＃39;）;您可以切换为锚元素激活的类。

为了测试锚是否处于活动状态（该类是否处于活动状态），您可以使用：

var isActive = $('#catmenu li').find('a.active').length > 0 ? true : false;

我添加了一个按钮来进行此测试。

＆＃13;

$(function () {
  $('#catmenu li').hover(function(e) {
    $(this).find('a').css('color', 'red');
  }, function(e) {
    $(this).find('a').css('color', '');
  });
  
  
  $('#catmenu li').on('click', function(e) {
    e.preventDefault();

    if ($(this).index() == 0) { // if first category
      $(this).find('a').toggleClass('active');
    }
  });

  $('#btn').on('click', function(e) {
    var isActive = $('#catmenu li').find('a.active').length > 0 ? true : false;
    console.log('First category is active: ' + isActive);
  });
});

＆＃13;

.active {
  color: #acaf2c;
  font-weight: bold;
  text-decoration: none;
  background: inherit;
}

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>


<ul class="wooc_sclist" id="catmenu">
    <li class="category " ><h2><a href="..." class="...">Bla</a></h2></li>
    <li class="category " ><h2><a href="..." class="...">Bla</a></h2></li>
    <li class="category " ><h2><a href="..." class="...">Bla</a></h2></li>
</ul>
<button id="btn">Check if first category is active</button>

＆＃13;

Answer 4

您需要使用此JavaScripts代码：

 $(document).ready(function(){
  $('ul li a').click(function(){
    $('li a').removeClass("active");
    $(this).addClass("active");
});
});

看看我的演示链接 Demo link

Answer 5

检查此代码是否在这里工作：我希望能解决它。

＆＃13;

		$(document).ready(function(){
		  $('ul li a').click(function(){
			$('li a').removeClass("active");
			$(this).addClass("active");
		});
		});

＆＃13;

body 
{
margin: 0; 
padding: 0; 
font-size: 100%; 
font-family: Arial, Helvetica, sans-serif;
}
.menu ul{}
.menu ul li {}
.navbar-inverse.menu ul li a {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
	background:transparent;
}
.navbar-inverse.menu ul li a:hover, .navbar-inverse.menu ul li a.active, .navbar-inverse.menu ul li a.active:hover {

	background: rgba(183, 51, 106, 0.38);
}
.navbar-inverse {
    border-radius: 0;
}
ul.wooc_sclist li a {
  color: green;
}
ul.wooc_sclist li a:hover, ul li a.active, ul li a.active:hover {
  color:red;
  background: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="wooc_sclist" id="catmenu">
<li class="category " ><h2><a href="#" class="">Bla 1</a></h2></li>
  <li class="category " ><h2><a href="#" class="">Bla 2</a></h2></li>
  <li class="category " ><h2><a href="#" class="">Bla 3</a></h2></li>
</ul>

＆＃13;

Answer 6

好的，我不熟悉jQuery jet，但是你可以用纯JavaScript来实现它。如果您理解这个概念，如果您愿意，可以在jQuery中轻松完成。

//get list item from navmenu
var navUl = document.getElementById("catmenu").childNodes;
var address = document.URL;

//base function for returning arr of LIs 
function mapForEachLi(object) {
    var arr = [];
    for (index in object) {
        if (object[index].nodeType == 1) { //put only element nodes in array
            arr.push(object[index]);
        }
    }
    return arr;
}
//get array of nav LIs
var navLis = mapForEachLi(navUl);

//loop trough array of LIs
for (var i = 0; i < navLis.length; i++) {
    //get value a tag href attribute
    var liLink = navLis[i].firstChild.getAttribute("href");
    //campare current page URL with a tag href value 
    //if they are the same then change style
    if (document.baseURI === liLink) {
        navLis[i].style.textDecoration = 'underline';//you can change CSS class if you want
    }
};

Answer 7

Click for live demo

如果你想使用Jquery和javascripts代码：

activation_fn

或者如果你想使用普通的javascript代码：

$(function() {
     var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/")+1);
     $("nav ul a").each(function(){
          if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
          $(this).addClass("active");
     })
});

在这里你得到你的src文件：

Click here for Source files from github --

Click here for source link

着色<a> when inside a link

7 个答案: