It is not possible for jQuery to modify the style of ul and li elements

$(document).ready(function(){
    $(".menu").on('click', 'li', function () {
  $(this).css('background-color', '#000000');
});
});
</script>

<ul class="menu">
  <li onclick="window.location.href='start.php'">Start</li>
  <li onclick="window.location.href='event.php'">event</li>
  <li onclick="window.location.href='event_list.php'">event list</li>
  <li onclick="window.location.href='black_list.php'">black list</li>
  <li onclick="window.location.href='logout.php'">logout</li>
</ul>

Attempting to modify the style of a clicked li element individually. Struggling to get it to work, any suggestions?

jquerycsshtml-listsclick

Answer №1

It has been observed that using inline javascript may not be the most efficient approach. Consider the following alternative solution:

Here is a combination of javascript and jQuery:

$(document).ready(function(){
    $(".menu").on('click', 'li', function () {
        $(this).css('background-color', '#000000');
        var loc = this.id + '.php';  
        window.location.href = loc;
    });
});

For the HTML structure:

<ul class="menu">
  <li id="start">Start</li>
  <li id="event">event</li>
  <li id="event_list">event list</li>
  <li id='black_list'>black list</li>
  <li id='logout'>logout</li>
</ul>

Additionally, it is important to note that any CSS changes made may not be visible if the page is redirected. It is advisable to open the new page in a new tab, like so:

window.open(loc, '_blank');

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

Leveraging the power of JavaScript to reveal concealed div elements

I've got a collection of divs (five in total) with a hidden class applied to them in my CSS stylesheet. Each div also has its own unique ID. My goal is to use JavaScript to reveal these divs one by one. Here's an example of what I'm looking ...

javascriptcssclasshtml

When it comes to @font-face, Chrome has no trouble detecting the font, but an issue

<style> @font-face { font-family : 'Avenir'; src : url("/fonts/Avenir999.otf"); } p.price a span { /*font-family : 'Avenir';*/ font-size : 45px; color: #889900; ...

htmlcssfont-facemarginpadding

Is it possible to clear a div using jQuery and then restore its contents?

In my setup, I have a video player within a div where clicking the play button (.video-play-container) fades in the video, and clicking the close button (.close-video) fades it out. The issue arose when the faded-out video continued playing in the backgr ...

javascriptjqueryattr

What causes one CSS file's properties to be inherited by another CSS file in a React application?

I'm puzzled as to why my hero section file seems to be adopting the styling from the navbar CSS file. I do understand that the index.css file sets properties for the entire app, but in my case, I have separate CSS files for different components instea ...

javascripthtmlcssreactjs

Elements are not detected after applying display:none

Within the onLoad event, I implemented a function to hide multiple div elements by setting their CSS property display to "none" and assigning them the class name "invisible": function hideContent() { laElements = document.getElementById("content").chil ...

javascripthtmlcssdom

Achieving equal heights for div boxes while aligning list items inside

I have 8 green boxes on my site, each containing an image and either 3 or 4 list items with text only. The issue I'm facing is that the boxes are not of equal height due to two reasons: (1) One box may have an extra list item pushing the rest down, or ...

htmlcsslistdivider

I'm having trouble getting the delete button to function properly in Laravel. Since I'm new to this framework, I'm unsure of how to fix

Below is the jQuery script I am using: $(document).on('click', '.btnDeleteStudent', function () { var id = $(this).val(); var token = $("meta[name='csrf-token']").attr("content"); ...

phpjqueryajaxlaravel

Interactive horizontal slideshow for hyperlinks - bootstrap framework and model-view-controller architecture

I am currently working on an MVC project that utilizes Bootstrap. My requirement is to have a horizontal menu of links that can slide left and right using arrows (similar to a carousel, but for links instead of images). To be more specific, the menu need ...

jqueryhtmlcssasp.net-mvctwitter-bootstrap

Bootstrap Carousel fails to function properly

I have tried everything, even using code directly from ww3 with added cdn. It worked on bootstrap 4 beta, but the rest of my site is using an earlier version. I'm new at this and hesitant to mix versions unnecessarily. <!DOCTYPE html> <html ...

htmlcsstwitter-bootstrap-3carouselbootstrap-4

Highlighting rows using jQuery upon selecting checkboxes

I attempted to emphasize a row in a table using jQuery when the checkbox is checked. This is the jQuery code I used for this purpose: $(":checkbox").change(function() { $(this).closest("tr").toggleClass("highlight", this.checked); }); However, it see ...

jqueryhtmlcsscheckboxhtml-table

PHP Email Styling Techniques

While working on a website, I encountered an issue with the automated email sent upon registration. The email was displaying the CSS code. $body '<span style="color:#444444;">Header</span>'; I attempted to use a code from online tha ...

phphtmlcssemailstyles

Tips for splitting a container of specific height into sections measuring 80% and 20%

I am working on a container with a fixed position that I want to split into two halves: 80% and 20% at the bottom. This is what I want it to look like: Click here to see the image. Note: The layout should adjust itself when the window is resized. You c ...

javascripthtmlcss

What is the best way to reduce a varying percentage as the value continues to rise?

My memory of math may be a bit fuzzy, but I can't seem to recall how to solve this particular issue. In jQuery, I have been adding randomized clipping paths to my images using the following code: var max=100; var spread=5; jQuery.each( $("img"), func ...

jquerycssmath

What is the best way to align a button within a Jumbotron?

Struggling to find the right CSS placement for a button within a jumbotron. I attempted using classes like text-left or pull-left, but nothing seemed to work as I hoped. I believe a simple CSS solution exists, but it's eluding me at the moment. Ideall ...

htmlcsstwitter-bootstrap

When attempting to run JavaScript within PHP, an Uncaught SyntaxError is encountered

When I run this code without PHP, it works perfectly. <?php $activeStatus = "$getuser[active]"; if($activeStatus == 1) { echo '<script type="text/javascript">'; echo ' $(document).ready(function () { v ...

javascriptphpjquery

Adding CSS classes through the .addClass method - A guide on utilizing linked CSS files

I came across this code snippet and I have a quick question. $(window).scroll(function() { var y_scroll_pos = window.pageYOffset; var scroll_pos_test = 150; // adjust as needed if(y_scroll_pos > scroll_pos_test) { $( "#cssmenu" ).addCl ...

jquerycss

Bootstrap does not show submenus on its navigation menus

I am currently designing a menu with Bootstrap, but for some reason, the submenu items are not showing up. https://i.stack.imgur.com/qZqyf.png After carefully reviewing the HTML code multiple times, I am unable to identify any issues. I am now questionin ...

javascripthtmlcsstwitter-bootstrap

The correct way to write media queries in CSS for the iPhone

After successfully formatting a website for various devices using an online responsive design tester and CSS declarations like @media only screen and (max-width: 480px), I encountered an issue during testing on an actual iPhone. The browser was not computi ...

iphonecssmobilemedia-queriesdevice

Steps to correct alignment in a numbered list when the dot is removed using CSS

Currently, I'm working on developing a rule page for a game. The specific layout requirements dictate that the rules be presented in an ordered list without periods following each number: 1 Rule one 2 Rule two 3 Rule three To achieve this format ...

htmlcsshtml-lists

Is it possible to have an icon change color in a TableRow column when hovering over any part of that particular row?

I am currently using material-ui version 4.9.5. To illustrate my issue, I have created a simplified example here. I have a Table that is populated with basic JSON data. Each row in the table consists of an icon element along with its corresponding color a ...

javascripthtmlcssreactjsmaterial-ui