Question

我正在尝试添加一个＆＃34;有效的＆＃34;对wordpress云标记中单击的选项卡进行分类。

这是我创建标签云的方式：

        <?php
            $args = array(
                "hide_empty" => false
            );

            if ( function_exists('wp_tag_cloud') ) :
        ?>
                <div class="span4 grey sidebar">
                    <div class="padded news-tag">
                        <p class="prio-3">Show more about</p>
                        <?php wp_tag_cloud($args); ?>
                    </div>
                </div>
        <?php
            endif;
        ?>

这是生成的HTML：

<body class="archive tag tag-testing tag-62">
<div class="page-container">
    <div class="container">
        <div class="row">
            <div class="span4 grey sidebar">
                <div class="padded news-tag">
                    <p class="prio-3">Show more about</p>
                    <a href="link" class="tag-link-65" title="testing" style="font-size: 22pt;">testing</a>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

我希望能够访问点击的标签并添加一个＆＃34;有效的＆＃34;使用jQuery的类使用类似的东西：

<script type="text/javascript">
    jQuery( document ).ready(function(jQuery){
        jQuery( '.sidebar .news-tag a' ).click(function(e){
            var element = $(this);
            if( element.hasClass('active') ) {
                return false;
            }
            else {   
                element.addClass('active');
            }
        });
    }(jQuery))
</script>

有谁知道这样做的正确方法？

提前致谢！

Answer 1

这样做：

jQuery( '.sidebar .news-tag a' ).click(function(e){

  jQuery( '.sidebar .news-tag a' ).removeClass("active"); // remove class from other tab

  jQuery(this).addClass("active"); // set class to current clicked tab

});

Answer 2

试试这个：

<script type="text/javascript">
jQuery( document ).ready(function($){
    $( '.sidebar .news-tag a' ).click(function(e){
        $('.active').removeClass('active');
        $(this).addClass('active');
    });
}); // <------update to this.
</script>

Answer 3

首先，删除＆＃39;有效＆＃39;来自屏幕上任何元素的类。然后，将该类添加到单击的元素。

  jQuery( document ).ready(function(jQuery){
        jQuery( '.sidebar .news-tag a' ).click(function(e){

            var element = $(this);

            if($('.active').length>0){ //if there is an active element...

              $('.active').removeClass('active'); //remove the class from it.
              //note that the if is optional, but treating this exception might
              // be useful in the future.
            }

            element.addClass('active'); //now, add the class to this element

        });
    });

Answer 4

我自己找到了解决方案。我打算在这里张贴以防万一有人需要它。

首先，我通过检查URL参数来检查点击的标签：

<?php
    global $wp;
    $current_url = add_query_arg( $wp->query_string, '', home_url( $wp->request ) );
    $url_tag_php = substr( $current_url, strrpos( $current_url, '=' )+1 );
?>

现在我们知道标签的名称可以与jQuery一起使用来添加'active'类：

<script type="text/javascript">          
    jQuery().ready(function() {
      jQuery(".news-tag a").each(function() {
        addActiveClassTag(this);
        return true;
      });
    });

    function addActiveClassTag(thisObj) {
      var pageTag = jQuery(thisObj).text().toLowerCase();
      var url_tag = '<?php echo $url_tag_php ?>';
      if ( pageTag == url_tag ) {
        jQuery(thisObj).addClass('active');
      }
      return true;
    }
</script>

我希望这对你有所帮助。享受！

将活动类添加到单击的wordpress选项卡？

4 个答案: