display a div based on the user's choice

I am working with the following http://jsbin.com/useqa4/10

My query revolves around hovering over li elements in the submenu using the code snippet below:

$(".submenuList li").hover(function () {
  $(".submenuCurrent").removeClass("submenuCurrent");
  $(this).addClass("submenuCurrent");
  });

When hovering over any of these li elements, I want to change and display a specific div in the right section.

For instance:

for the first li, display the div #prasentRight
for the second li, display the div #elitRight
for the third li, display the div #suspendisseRight
for the fourth li, display the div #laoreetRight

My challenge lies in determining the current index of .submenuList li

Can anyone provide guidance on this issue?

jquery css list menu

Answer №1

This code snippet is a great solution:

$('submenuList li').hover(
  function(){
    var index = $(this).index();
    $(this).attr('data-index', index);
  });

It displays the current index of the hovered list items in the data-index attribute of the element. Check out the live demo on JS Bin.

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

The issue of CSS3 Grid-gap not functioning properly on iPhone devices

I've been working on creating a CSS template and everything seems to be functioning correctly, except for the grid gap which doesn't seem to work properly on my iPhone. Here's the code I have so far: <div class="grid"> <h1 ...

html ios iphone css

The div element is experiencing a resizing issue

I am currently working on the following HTML markup: <div class="card" style="height:100%"> <div class="controlPanelContainer"> <div class="card" style="background-color:yellow;height:200px"> </div> <div class= ...

css bootstrap-4

The div element is failing to occupy the entire page

I have encountered an issue where I created two small blocks, but they do not start from the screen edges. Instead, they take up space from the left, right, and top as well. Here is my code: HTML <body> <div id="header"></div> & ...

Sleek and versatile sidebar reaching full height

Is there a way to make my sidebar cover the full height of the screen without using position: fixed? The code I've tried doesn't seem quite right. Any tips? JSFindle: http://jsfiddle.net/Pw4FN/57/ if($(window).height() > $('#page-contai ...

css responsive-design

How can I delete the header and footer on a personalized homepage design?

After crafting a unique home page/landing page for my website that stands out from the rest, I've come across an issue. The header and footer are appearing on this new page, but I only want to display what I specifically coded. I attempted using Site ...

html css wordpress web

Slideshow plugin glitch on Safari and Opera caused by jQuery implementation

My current project involves utilizing a fantastic plugin called Sequence.js for creating animations and transitions with CSS3 based on jQuery. I have set up a simple responsive fadeIn-fadeOut slideshow using this plugin. While everything works smoothly an ...

jquery css safari slideshow opera

Initiate an AJAX call using a GET request

Learning AJAX has been a bit challenging for me from the start. I went ahead and set up a database with a table called users, consisting of fields like id, name, email. Afterward, I created a php file named db.php to establish a connection with the dat ...

Exploring Arrays within C# Classes

I am facing a challenge with incorporating a new widget that consists of multiple components into my existing classes. The structure of the components cannot be a List<Component> due to the way the real-world models are provided by a web service. I ...

c#arrays list class

The JSON object is coming back as null

I need some clarification on why I am getting an "undefined" alert. Any assistance you can offer would be greatly appreciated as this problem is holding up progress on a crucial project. JavaScript $.getJSON("item-data.json", function(results) { ...

javascript jquery json

What methods are available for modifying nodes generated dynamically?

I have been on a quest for quite some time now to find a way to manipulate HTML content that has been dynamically added. Initially, I fetch a cross-domain website using getJSON: $.getJSON('http://whateverorigin.org/get?url=' + encodeURIComponent ...

javascript html jquery jquery-events

Dynamic Vimeo button integration

Is there a way to create a button over-video design that is responsive, without using JavaScript and only inline styles? <div class="video-container"> <div class="overlay"> <div class="button-co ...

html css inline-styles

The submit button remains disabled despite completing all required fields

https://jsfiddle.net/xrxjoaqe/ I'm encountering an issue with the bootstrap inline validation files. Despite filling in all the required fields, the submit button remains disabled. $('#registerbutton').attr('disabled', 'di ...

javascript jquery twitter-bootstrap-3

Ways to extract data from a JSON file using jQuery and assign them as text values?

I have a data table that I serialize into JSON and then parse in my view using jQuery to access the values. However, when I use document.getElementById('Name').value = UserInfo.Name; the value of Userinfo.Name = null, I'm having trouble ...

The CSS :not selector does not work as intended

My goal is to assign the class no-color to a specific tag. When JavaScript is enabled, I want this class to be removed and the text to be colorized. However, my current CSS solution is not working as expected. Below is a sample code snippet demonstrating t ...

Showing two divs on top of an image inside a container

Hey there, I apologize for the messy title but I've been searching for an answer for a couple of hours now. <div id="lightbox"> <img src="blabla.png"> <div href="#" id="next" onClick="next(1)"></div> <div href=" ...

The CSS styling for a pie chart does not seem to be functioning properly when using jQuery's

https://i.stack.imgur.com/kEAKC.png https://i.stack.imgur.com/03tHg.png After examining the two images above, it appears that the CSS is not functioning properly when I try to append the same HTML code using JavaScript. Below is the snippet of my HTML co ...

javascript jquery html css styles

Aligning the Navigation Bar to the Upper Right Corner

I'm attempting to rearrange my Nav Bar to be at the Top Right, with my logo on the Top Left all in one line. Unfortunately, I'm struggling to achieve this and could really use some guidance. As a newcomer to HTML and CSS, I find it challenging to ...

Adjust the image dimensions within the DIV container

I am currently working on creating my personal portfolio website. I have encountered an issue where the image inside a div element enlarges the size of the entire div as well. My goal is to keep the image slightly larger while maintaining the same size for ...

javascript jquery css html

Modifying the CSS based on the SQL data retrieved

I'm currently diving into the world of php and jquery, attempting to build a webpage that displays player information and their status fetched from my Mysql server. Although the core code is functional, it's a mashup of snippets gathered from va ...

javascript php jquery html mysql

Reading a JSON file using Javascript (JQuery)

Struggling to figure out how to handle a JSON file using JavaScript. Here are the details : { "streetCity": { "132":"Abergement-Clemenciat", "133":"Abergement-de-Varey", "134":"Amareins" } } I am attempting to access ...

javascript jquery json parsing

CSSer Q&A