How to add active class to link which is loaded via views and links comes from content type

Question

1. I have created a content type calls as "XYZ Inner Pages".
2. Here I am adding a Fieldset and inside field set I am adding field type as Link.
3. Now I create a page using XYZ "Inner Pages" Content Type, add content and the links.
4. I am hiding the Links from Manage display because I want to show those on the right side of page.
5. Now I am creating a view which will pull all the links from "XYZ Inner Pages" Content Type.
6. Now I am showing the views block in the right section of "XYZ Inner Pages" Content Type page.
7. This right block will list the link.
8. Now I want to add active class to links so when I open any of the link from that list, then opened link from the list should be highlighted.

Answer 1

Example:

In my content type I added a link field called "link", so the machine name is field_link

In this link field for url I put http://example.com/node/3

I created a View called "Test".

In fields I added link.

In fields I added link again, but this time I change the formatter to URL, as plain text

We are going to use template_preprocess_views_view_fields

In your theme's template.php file you add

function mytheme_preprocess_views_view_fields($vars){

  if ($vars['view']->name == "test"){

    $field_link = strip_tags($vars['fields']['field_link_1']->content); // use strip_tags function to remove HTML markup.
    $field_link = str_replace('http://', '', $field_link); // remove http://
    $field_link = str_replace('www.', '', $field_link); // remove www.

    $node_url = $_SERVER['SERVER_NAME'] . '/' . request_path(); // see https://api.drupal.org/api/drupal/includes!bootstrap.inc/function/request_path/7.x

    if ($field_link == $node_url){

      $vars['fields']['field_link']->content = '<div class="active-link">' . $vars['fields']['field_link']->content . '</div>';

    }

    $vars['fields']['field_link_1']->content = null; // hides the field_link_1 field

  }

}

• replace mytheme with the actual name of your theme.
• replace test with the actual name of your view.
• replace field_link with the actual name of your field.

Then you add the CSS to your theme's style.css file, Example:

.active-link a { color: green; }