Modify the class of the li element when the page is in an active

When working in Rails, I encountered an issue with changing the class of an li element based on whether the page is active or not. I attempted to use an application helper function for this purpose, but unfortunately, the code did not work as expected when placed within the element itself. However, when I moved the code outside the element (for example, within p tags), it worked fine.

Here is a snippet from my application helper file:

  def activepage(path)
    ' class="active"' if current_page?(path)
  end

Below is how the sidebar partial is structured:

    <li<%= activepage(root_path) %>>
        <a href="blank-page.html"><i class="fa fa-fw fa-file"></i> Blank Page</a>
    </li>

It seems that the li element does not get created properly when the page loads. Does anyone have insights into why this might be happening and suggestions on the most elegant way to resolve this issue? Your help is greatly appreciated!

Thank you!

Answer №1

To troubleshoot the issue, attempt to resolve it by modifying your view code as follows:

<li <%= current_page?(root_path) ? "class=highlighted" : "class=not-highlighted" %>>
    <a href="sample-page.html"><i class="fa fa-fw fa-file"></i> Sample Page</a>
</li>

If current_page?(root_path) evaluates to true, then the li class will be highlighted; if false, the class will be not-highlighted.

If your current_page?(root_path) is yielding false results, this may be the root of the problem as the class attribute in the form of "highlighted" will never be applied.

Answer №2

< li "<%= activepage(root_path) %>" >

Make sure to enclose the ruby code in double quotation marks. Ensure that the helper method is returning the desired value.

Take a closer look at the HTML generated by using tools like Firebug or inspecting it manually.

Answer №3

The issue was resolved by placing the helper inside the "helper" class.

<li class="<%= activepage(root_path) %>">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding content to a text field and then moving to the next line

I am looking to add a string to a text area, followed by a new line. After conducting some research, here are the methods I have attempted so far but without success: function appendString(str){ document.getElementById('output').value += st ...

"Exploring the wonders of a jQuery plugin within the

Can anyone recommend a plugin for eclipse Luna that offers complete jQuery functionality? I've noticed that JSDT doesn't provide all the features. Thank you! ...

Issue with React select dropdown not properly updating selected value

My website has a form with the default value of ethExperienceLevel set to "BEGINNER". I have a function that is supposed to update the selected state when switching between options in a dropdown list, triggered by an onChange handler. However, I noticed ...

Issue with X overflow visible at the right edge of the webpage (Vue.js and Tailwind CSS)

RESOLVED There is a strange white overflow on the right side of my responsive website that appears and becomes smaller as I scroll down the page. I can't seem to figure out why this is happening. None of the elements are overflowing into that space. ...

Passing information using AJAX, utilize the data as a paragraph in PHP

As someone with limited experience in PHP, I've been attempting to create a basic "adminpage" on my own. However, I've run into an issue when passing a value via AJAX from the adminpage to the index page - the value does not appear in the paragra ...

In PHP, one way to determine if a name already exists in a form submission and, if so, append a number to make it unique

I have a coding challenge where I need to upload a .zip file, extract its contents, and then rename the directory based on user input. The form for this task is as follows: <form action ="" method="post" enctype="multipart/form-data> <div> ...

When triggered by a click, the function gradually fades in and out. It superimposes one image on top of another, but unfortunately, the sizes

Due to different screen sizes, the image does not appear on top of another image exactly. It seems like a new function is needed. One that does not overlap with another image (by clicking the function for a few seconds), but rather replaces it for those fe ...

Assigning an identification to a descendant of an element that is currently being displayed

Is there a way to use jQuery to add #cat to the visible .horse's child element with class .dog? <div id="tabs-1" class="horse" style="margin-right: 20px; display: none;"> <div style="width:70%; margin: 0 auto; margin-top:-20px"> ...

Elevating subtags in HTML using Beautiful Soup library in Python 3

Looking to enhance a multitude of html files with the help of a beautifulsoup script. Some of the html files contain blocks like the ones below where img tags are nested within a tags. <p> <a class="" data-api-endpoint="https://example.com/ap ...

Is it possible for me to utilize window.top within the .js file?

Within my GWT code, I am transferring a variable to a JSP file. The process looks like this: <html> <head> <script type="text/javascript"> alert("Inside the JSP file"); var criticalPath = window.top.criticalPath; ...

Leverage the power of Reactjs to add hover effects to a mapped

I am facing a challenge in styling the ListItem on hover. The issue arises when the list is dynamically generated, causing all list items to change style simultaneously when hovered over. How can I target only one element for styling? Below is the code sni ...

Combining various array values into a single key in JSON格式

Issue: I am working on a sign-up form for new users using HTML. The goal is to store multiple arrays (each containing "username: username, password: password, topScore: 0) within one JSON key ("user" key). However, the current functionality only allows f ...

Trying to replace all instances of a word in an HTML document with a <span> element, but only for <p>, <span>, and <div> tags. It shouldn't work if the parent node already contains

Here is the HTML code snippet I am working with: <div> hello world <p> the world is round <img src="domain.com/world.jpg"> </p> </div> I am looking to replace the word "world" (or any mixed case variations) with < ...

Preventing unclickable Bootstrap checkboxes with identical IDs

I have a checkbox setup like this <div class="form-group"> <div class="col-sm-3"> <div class="checkbox clip-check check-primary"> <input type="checkbox" value="machin ...

trouble combining two arrays of JavaScript objects

I'm facing a challenge with an object array. I need to add a new object "WITH" a specific index, but I'm unsure of the correct approach. This is my current attempt: //ORIGINAL DATA: this.fetchedData = [{ "startMinute": 0, //Remove "annotati ...

Although HTML and CSS files may be similar, the way in which styles are implemented can vary greatly from one

Working on a project locally, I noticed different styling on one element between two repositories. Despite the HTML, CSS, and JS files being identical according to WinMerge, there's an inconsistency with the bootstrap class card-img-overlay. The issue ...

What might be causing Chrome to not wrap a centered column to the next line in Bootstrap 4 beta?

Utilizing bootstrap 4 beta, my goal is to center a line of text inside a column and ensure that if the text exceeds the line width, it wraps to the next line. I attempted to achieve this by using justify-content-center on the row in combination with col-a ...

"Utilizing AngulaJS to apply a class to the parent element when a radio button is

I'm wondering how I can assign a class to the parent div of each radio button in a group? You can find the code below and view the corresponding JSFiddle here. Here is the HTML: <div class="bd"> <input type="radio" ng-model="value" val ...

CSS: Turn off the custom styling for radio buttons

My dilemma lies in the custom radio button I've created using CSS. The issue is that while I can select the radio button, I cannot deselect it. Here is a snippet of the CSS code I used to create the custom radio button: input[type="radio"]:checked:be ...

Establish a Zebra DataList Chart

My first task is to connect a Table from the database so that each row is editable. After some research, I settled on using the DataList due to its <EditItemTemplate> property, which the repeater lacks. To create a Zebra table, I crafted a CSS class ...