So, I don't have any working knowledge of JavaScript, but I am wondering why this does not work for me. I have 4 buttons, 4 different divs with different images, when one button is clicked I would like the images to change to the category which is displayed on the button.
i.e Button: "Windows" --Button is clicked--> Show images of windows
Button "Doors" --Button is clicked--> show images of Doors
JavaScript file is imported to HTML document:
<head>
<script type="text/javascript" src="script.js"></script>
</head>
const showChoosenCategory = event => {
const getId = event.id
const links = document.querySelectorAll('.work-category button')
for (i = 0; i < links.length; i++) {
if (links[i].hasAttribute('class')) {
links[i].classList.remove('active')
}
}
event.classList.add('active')
const getCategory = document.querySelector(`.category-${getId}`)
const categories = document.querySelectorAll('div[class ^= "category-"]')
for (i = 0; i < categories.length; i++) {
if (categories[i].hasAttribute('class')) {
categories[i].classList.remove('showCategory')
categories[i].classList.add('hideCategory')
}
}
getCategory.classList.remove('hideCategory')
getCategory.classList.add('showCategory')
}
.hideCategory {
display: none;
}
<div class="gallery" id="gallery">
<div class="work-category">
<button class="category active" id="windows">Fönster</button>
<button class="category" id="doors">Dörr</button>
<button class="category" id="furniture">Möbler</button>
<button class="category" id="misc">Övrigt</button>
</div>
<div class="category-windows showCategory">
<div class="imageslist">
<img src="assets/img_window.jpg" class="gallery-image">
</div>
</div>
<div class="category-doors hideCategory">
<div class="imageslist">
<img src="assets/img_door.jpg" class="gallery-image">
</div>
</div>
<div class="category-furniture hideCategory">
<div class="imageslist">
<img src="assets/img_furniture.jpg" class="gallery-image">
</div>
</div>
<div class="category-misc hideCategory">
<div class="imageslist">
<img src="assets/img_misc.jpg" class="gallery-image">
</div>
</div>
</div>
How Can I make this work?
This is a small solution based on the script you provided.
I have modified/added some attributes in order to simplify the script.
The logic is the following:
the button dictates which div is going to be display
var controls = document.querySelector('.work-category');
var gallery = document.querySelector('.gallery');
controls.addEventListener('click', displayCategory);
function displayCategory(ev) {
var selectedControl = controls.querySelector('.active');
var activeCategory = gallery.querySelector('.showCategory');
// exiting early if the selected control
// is the clicked button
if (ev.target === selectedControl) { return; }
var categoryId = ev.target.dataset.category;
var category = gallery.querySelector('.category-' + categoryId);
ev.target.classList.add('active');
category.classList.add('showCategory');
selectedControl.classList.remove('active');
activeCategory.classList.remove('showCategory');
}
.active {
background: skyblue;
}
.category-windows,
.category-doors,
.category-furniture,
.category-misc {
display: none;
}
.showCategory {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="gallery" id="gallery">
<div class="work-category">
<button class="category active" data-category="windows">Fönster</button>
<button class="category" data-category="doors">Dörr</button>
<button class="category" data-category="furniture">Möbler</button>
<button class="category" data-category="misc">Övrigt</button>
</div>
<div class="category-windows showCategory">
<div class="imageslist">
<img src="assets/img_window.jpg" alt="window" class="gallery-image">
</div>
</div>
<div class="category-doors">
<div class="imageslist">
<img src="assets/img_door.jpg" alt="door" class="gallery-image">
</div>
</div>
<div class="category-furniture">
<div class="imageslist">
<img src="assets/img_furniture.jpg" alt="furniture" class="gallery-image">
</div>
</div>
<div class="category-misc">
<div class="imageslist">
<img src="assets/img_misc.jpg" alt="misc" class="gallery-image">
</div>
</div>
</div>
</body>
</html>
Related
I have 2 divs that all have the same css class, as follows:
/*div 1 */
<div class="oxilab-flip-box-col-5 oxilab-flip-box-padding-1" >
<div class="oxilab-flip-box-body-1 oxilab-flip-box-body-1-1">
<div class="oxilab-flip-box-body-absulote">
<div class="oxilab-flip-box-flip oxilab-flip-box-flip-left-to-right">
<div class="oxilab-flip-box-style-data easing_easeInOutCirc">
<div class="oxilab-flip-box-style">
<div class="oxilab-flip-box-front">
<div class="oxilab-flip-box-1">
<div class="oxilab-flip-box-1-data">
</div>
</div>
</div>
<div class="oxilab-flip-box-back">
<div class="oxilab-flip-box-back-1">
<div class="oxilab-flip-box-back-1-data">
<div class="oxilab-heading" googl="true">
heading
</div>
<div class="oxilab-info">
some text
</div>
<a href="http://test.com" target="">
<span class="oxilab-button">
<span class="oxilab-button-data">
enter
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
/*div 2 */
<div class="oxilab-flip-box-col-5 oxilab-flip-box-padding-1" >
<div class="oxilab-flip-box-body-1 oxilab-flip-box-body-1-1">
<div class="oxilab-flip-box-body-absulote">
<div class="oxilab-flip-box-flip oxilab-flip-box-flip-left-to-right">
<div class="oxilab-flip-box-style-data easing_easeInOutCirc">
<div class="oxilab-flip-box-style">
<div class="oxilab-flip-box-front">
<div class="oxilab-flip-box-1">
<div class="oxilab-flip-box-1-data">
</div>
</div>
</div>
<div class="oxilab-flip-box-back">
<div class="oxilab-flip-box-back-1">
<div class="oxilab-flip-box-back-1-data">
<div class="oxilab-heading" googl="true">
heading
</div>
<div class="oxilab-info">
some text
</div>
<a href="http://example.com" target="">
<span class="oxilab-button">
<span class="oxilab-button-data">
enter
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
As you can see, both main divs have oxilab-flip-box-col-5 class and each has an ahref tag, now I want all the div components to be linked when the page is loaded, as follows:
/*div 1 */
<a href="http://test.com" target="">
<div class="oxilab-flip-box-col-5 oxilab-flip-box-padding-1" >
.
.
.
</div>
</a>
/*div 2 */
<a href="http://example.com" target="">
<div class="oxilab-flip-box-col-5 oxilab-flip-box-padding-1" >
.
.
.
</div>
</a>
I was able to write this code with JavaScript, but unfortunately, the code I wrote does not work.
var fisrtdiv = document.getElementsByClassName("oxilab-flip-box-col-5");
var aTag = document.createElement('a');
aTag.setAttribute('href',"http://test.com");
aTag.innerText = "some text";
fisrtdiv.appendChild(aTag);
var seconddiv = document.getElementsByClassName("oxilab-flip-box-col-5");
var aTag = document.createElement('a');
aTag.setAttribute('href',"http://example.com");
aTag.innerText = "some text";
seconddiv.appendChild(aTag);
Any idea how I can do this and link each div separately ?
Here You Go:
var first_div = document.getElementsByClassName("oxilab-flip-box-col-5")[0];
var parent1 = first_div.parentNode;
var a_tag1 = document.createElement('a');
parent1.replaceChild(a_tag1, first_div)
a_tag1.appendChild(first_div)
a_tag1.setAttribute('href',"http://example.com");
/////////
var second_div = document.getElementsByClassName("oxilab-flip-box-col-5")[1];
var parent2 = second_div.parentNode;
var a_tag2 = document.createElement('a');
parent2.replaceChild(a_tag2, second_div)
a_tag2.appendChild(second_div)
a_tag2.setAttribute('href',"http://example.com");
getElementsByClassName return an HTMLCollection of elements.
Change your code to:
var fisrtdiv = document.getElementsByClassName("oxilab-flip-box-col-5")[0];
var aTag = document.createElement('a');
aTag.setAttribute('href',"http://test.com");
aTag.innerText = "some text";
fisrtdiv.appendChild(aTag);
var seconddiv = document.getElementsByClassName("oxilab-flip-box-col-5")[1];
var aTag = document.createElement('a');
aTag.setAttribute('href',"http://example.com");
aTag.innerText = "some text";
seconddiv.appendChild(aTag);
You should try to DRY (Don't Repeat Yourself). You can see that you do 2 times the same thing. What if you need to do it 100 times? Then your code will get messy quickly.
You'll see 2 solutions in my code: the ugly way (not DRY) and the cleaner way (DRY). There's a even cleaner way but let's start with this ;)
/*THE UGLY WAY*/
/*
var fisrtdiv = document.getElementsByClassName("oxilab-flip-box-col-5")[0];
var first_link = document.createElement('a');
first_link.setAttribute('href',"http://test.com");
first_link.innerText = "some text1";
first_link.append(fisrtdiv);
document.body.append(first_link);
//we take again at index 0 because before this line we changed the position of the flip boxes
var seconddiv = document.getElementsByClassName("oxilab-flip-box-col-5")[0];
var second_link = document.createElement('a');
second_link.setAttribute('href',"http://example.com");
second_link.innerText = "some text2";
second_link.append(seconddiv);
document.body.append(second_link);
*/
/*CLEANER WAY*/
var
list_of_flip_boxes = document.querySelectorAll(".oxilab-flip-box-col-5"),
list_of_links = [
{
text : "some text 1",
href : "http://test.com"
},
{
text : "some text 2",
href : "http://example.com"
},
];
list_of_flip_boxes.forEach(function(flip_box, index){
var
link_element = document.createElement("a"),
link_data = list_of_links[index];
link_element.setAttribute('href', link_data.href);
link_element.innerText = link_data.text;
link_element.append(flip_box);
document.body.append(link_element);
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<div class="oxilab-flip-box-col-5 oxilab-flip-box-padding-1" >
<div class="oxilab-flip-box-body-1 oxilab-flip-box-body-1-1">
<div class="oxilab-flip-box-body-absulote">
<div class="oxilab-flip-box-flip oxilab-flip-box-flip-left-to-right">
<div class="oxilab-flip-box-style-data easing_easeInOutCirc">
<div class="oxilab-flip-box-style">
<div class="oxilab-flip-box-front">
<div class="oxilab-flip-box-1">
<div class="oxilab-flip-box-1-data">
</div>
</div>
</div>
<div class="oxilab-flip-box-back">
<div class="oxilab-flip-box-back-1">
<div class="oxilab-flip-box-back-1-data">
<div class="oxilab-heading" googl="true">
heading
</div>
<div class="oxilab-info">
some text
</div>
<a href="http://test.com" target="">
<span class="oxilab-button">
<span class="oxilab-button-data">
enter
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="oxilab-flip-box-col-5 oxilab-flip-box-padding-1" >
<div class="oxilab-flip-box-body-1 oxilab-flip-box-body-1-1">
<div class="oxilab-flip-box-body-absulote">
<div class="oxilab-flip-box-flip oxilab-flip-box-flip-left-to-right">
<div class="oxilab-flip-box-style-data easing_easeInOutCirc">
<div class="oxilab-flip-box-style">
<div class="oxilab-flip-box-front">
<div class="oxilab-flip-box-1">
<div class="oxilab-flip-box-1-data">
</div>
</div>
</div>
<div class="oxilab-flip-box-back">
<div class="oxilab-flip-box-back-1">
<div class="oxilab-flip-box-back-1-data">
<div class="oxilab-heading" googl="true">
heading
</div>
<div class="oxilab-info">
some text
</div>
<a href="http://example.com" target="">
<span class="oxilab-button">
<span class="oxilab-button-data">
enter
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
My problem is:
Search script is working, but it only hides h3 elements from the code.
<h3 class="post-subtitle" style="display: flex;">Protokoły tunelowania VPN</h3>
<h3 class="post-subtitle" style="display: flex;">Certyfikat cyfrowy</h3>
I need the code to hide the whole div with "post" ID instead of just h3 element.
How do i do that?
HTML Code for Search Bar:
<div id="kontener" class="container">
<div style="text-align:center" id="search-bar">
<input type="text" id="searchbar" onkeyup="searchBar()" class="shadow-lg">
</div>
</div>
HTML Code on Website
<!-- First element -->
<div id="post">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="post-preview">
<a href="URL">
<h2 class="post-title"><i class="far fa-sticky-note fa-xs" aria-hidden="true"></i> ASO</h2>
<h3 class="post-subtitle" style="display: flex;">Protokoły tunelowania VPN</h3>
</a>
<p class="post-meta">11 Maj, 2021</p>
</div>
</div>
</div>
<hr>
</div>
<!-- End of First element -->
<!-- Second element -->
<div id="post">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="post-preview">
<a href="URL">
<h2 class="post-title"><i class="far fa-sticky-note fa-xs" aria-hidden="true"></i> ELSK</h2>
<h3 class="post-subtitle" style="display: flex;">Certyfikat cyfrowy</h3>
</a>
<p class="post-meta">26 Kwiecień, 2021</p>
</div>
</div>
</div>
<hr>
</div>
<!-- End of Second element -->
JavaScript code:
<script>
function searchBar() {
let input = document.getElementById('searchbar').value
input=input.toLowerCase();
let x = document.getElementsByClassName('post-subtitle');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display="none";
}
else {
x[i].style.display="flex";
}
}
}
</script>
You just need to target couple of parent nodes, either by .parentElement / .parentNode or use .closest function.
Example:
<script>
function searchBar() {
let input = document.getElementById('searchbar').value
input=input.toLowerCase();
let x = document.getElementsByClassName('post-subtitle');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].closest('#post').style.display="none";
// Or this below (note each parentElement targets parent tag)
// x[i].parentElement.parentElement.parentElement.parentElement.parentElement.style.display="none";
}
else {
x[i].closest('#post').style.display="flex";
}
}
}
</script>
I have some very simple code to get information about active div with class name active. I currently trying to get its index between a collection of divs with class name slide. However, I tried many selectors with no benefit. So, I need your help.
CSS
<style type="text/css">
.slide {
width:50px;border:1px solid #808080;height:50px;float:left; display:inline-block;
text-align:center; vertical-align:middle;/*display:none;*/
}
.active { background-color:brown }
</style>
HTML
<div style="text-align:center">
<input id="get_info" type="button" value="<<>>" />
<br />
<div style="display:inline-block">
<div class="slide ">0</div>
<div class="slide">1</div>
<div class="slide active">2</div>
<div class="slide">3</div>
</div>
<br />
<p id="msg"></p>
</div>
jQuery:
<script type="text/javascript">
$(document).ready(function () {
var nxt = 0;
var prv = 0;
var crnt = 0;
$("#get_info").click(function () {
crnt = $(".slide").index(".slide .active");
$('#msg').html(crnt);
});
});
</script>
As shown all I need to get "active" position index between "slide". The permanent result for this is -1.
You can get it like this:
$(document).ready(function() {
$("#get_info").click(function() {
let crnt = $(".slide").index($(".slide.active"));
$('#msg').html(crnt);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="text-align:center">
<input id="get_info" type="button" value="<<>>" />
<br />
<div style="display:inline-block">
<div class="slide ">0</div>
<div class="slide">1</div>
<div class="slide active">2</div>
<div class="slide">3</div>
</div>
<br />
<p id="msg"></p>
</div>
I am trying to create multiple popups on one page that would appear after clicking a button corresponding to them. I currently have them under the same class, as in here:
<div>
<!-- Popup -->
<div class="popup">
<div class="popup-content">
Some text here
</div>
</div>
<!-- Button -->
<img src="button.png" class="popup-button"/>
</div>
The problem is that I am struggling to access individual elements with my javascript code. I am not sure what to replace the manual array accessing ( [0] right now ) with.
<script>
// Get the popup
var popup = document.getElementsByClassName("popup")[0];
// Get the button that opens the popup
var btn = document.getElementsByClassName("popup-button")[0];
// When the user clicks the button, open the popup (hidden by default)
btn.onclick = function() {
popup.style.display = "block";
}
</script>
Now, I could create multiple scripts and access the arrays manually for each element but of course I am trying to automate it, so that script would run depending on which button was clicked. Say, if 5th button was clicked, 5th popup appears. Thank you!
Best way to link multiple elements in Javascript is using an id through the dataset of the elements.
// Get the popup's btn list
var popupsBtn = document.getElementsByClassName("popup-btn");
// Go through the popup's btn list
for (var i = 0; i < popupsBtn.length; i++) {
// Define the onclick event on popup's btn
popupsBtn[i].onclick = function() {
// Get the popup associated to the btn with the data-popup-id
var popup = document.getElementById("popup-" + this.dataset.popupId);
// Use a class to toggle popup visible or not
popup.classList.toggle("visible");
}
}
.popup {
display: none;
}
.popup.visible {
display: block;
}
<!DOCUMENT html>
<html>
<head></head>
<body>
<div>
<div id="popup-1" class="popup">popup 1 here</div>
<img src="button.png" class="popup-btn" data-popup-id="1" />
</div>
<div>
<div id="popup-2" class="popup">popup 2 here</div>
<img src="button.png" class="popup-btn" data-popup-id="2" />
</div>
<div>
<div id="popup-3" class="popup">popup 3 here</div>
<img src="button.png" class="popup-btn" data-popup-id="3" />
</div>
</body>
</html>
Given your HTML, it would probably be easiest to just access the previous sibling of the clicked button to get to the .popup, and then change its style:
document.querySelectorAll('.popup-button').forEach(button => {
button.onclick = () => {
button.previousElementSibling.style.display = 'block';
};
});
.popup {
display: none;
}
<div>
<div class="popup">
<div class="popup-content">
Some text here1
</div>
</div>
<img src="button.png" class="popup-button" />
</div>
<div>
<div class="popup">
<div class="popup-content">
Some text here2
</div>
</div>
<img src="button.png" class="popup-button" />
</div>
<div>
<div class="popup">
<div class="popup-content">
Some text here3
</div>
</div>
<img src="button.png" class="popup-button" />
</div>
You can use other attributes to identify the button. You could not rely on the className alone.
You can use data-id attribute and pass it in the method. using this.
Depending on your HTML structure, there are multiple possibilities.
Anyway, I suggest you to use .querySelectorAll() to get your elements, and then use a .forEach() to execute your code.
I tried to use much of your code to make it work correctly.
With a parent div
// Get all the buttons that opens the popups
var btns = document.querySelectorAll(".popup-button");
btns.forEach(function(btn, index) {
// When the user clicks the button, open the popup that is in the same parent div
btn.onclick = function() {
btn.closest('div').querySelector('.popup').style.display = "block";
}
});
.popup {
display: none;
}
<div>
<div class="popup">
<div class="popup-content">Pop-up 1</div>
</div>
<img src="button.png" class="popup-button" />1
</div>
<div>
<div class="popup">
<div class="popup-content">Pop-up 2</div>
</div>
<img src="button.png" class="popup-button" />2
</div>
<div>
<div class="popup">
<div class="popup-content">Pop-up 3</div>
</div>
<img src="button.png" class="popup-button" />3
</div>
Without a parent div
// Get the popups
var popups = document.querySelectorAll(".popup");
// Get the buttons that opens the popups
var btns = document.querySelectorAll(".popup-button");
btns.forEach(function(btn, index) {
// When the user clicks the button, open the popup (hidden by default)
btn.onclick = function() {
popups[index].style.display = "block";
}
});
.popup {
display: none;
}
<div class="popup">
<div class="popup-content">Pop-up 1</div>
</div>
<img src="button.png" class="popup-button" />
<br>
<br>
<div class="popup">
<div class="popup-content">Pop-up 2</div>
</div>
<img src="button.png" class="popup-button" />
<br>
<br>
<div class="popup">
<div class="popup-content">Pop-up 3</div>
</div>
<img src="button.png" class="popup-button" />
This solution withour parent div will work even if the popups and the buttons are not next to each other. But the order (and index) of the elements need to be the same. See it here:
// Get the popups
var popups = document.querySelectorAll(".popup");
// Get the buttons that opens the popups
var btns = document.querySelectorAll(".popup-button");
btns.forEach(function(btn, index) {
// When the user clicks the button, open the popup (hidden by default)
btn.onclick = function() {
popups[index].style.display = "block";
}
});
.popup {
display: none;
}
<img src="button.png" class="popup-button" />1
<img src="button.png" class="popup-button" />2
<img src="button.png" class="popup-button" />3
<div class="popup">
<div class="popup-content">Pop-up 1</div>
</div>
<div class="popup">
<div class="popup-content">Pop-up 2</div>
</div>
<div class="popup">
<div class="popup-content">Pop-up 3</div>
</div>
Hope it helps.
whenever, I mouseover on the 'li', then, that particular 'li' attribute need to changed to 'clsSect'. On the other hand, based on the list[li] selection, the div content has to set to 'display:block' other should changed to 'display:none'.
if the first 'li' selected, then, the first 'div' need to be selected, likewise
if the second 'li' selected, then, the second 'div' need to be selected,
This below code does not work as expected. Any help please?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<script src="js/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<div class="mainBodyContent" id="Contact">
<div class="perimgleft">
<img class="perImg" alt="This is for sample"/>
<div id="thisID3">
<p><span>sample3</span></p>
<p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a></p>
</div></div>
</div>
<div class="mainBodyContent" id="About">
<div class="perimgleft">
<img class="perImg" alt="This is for sample"/>
<div id="thisID2">
<p><span>sample3</span></p>
<p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a></p>
</div></div>
</div>
<div class="mainBodyContent" id="Careers">
<div class="perimgleft">
<img class="perImg" alt="This is for sample"/>
<div id="thisID1">
<p><span>sample1</span></p>
<p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a></p>
</div></div>
</div>
<div id="selRound">
<ul class="clearfix rouncorner">
<li id="fpn1" class="myList clsSect"></li>
<li id="fpn2" class="myList"></li>
<li id="fpn3" class="myList"></li>
</ul>
</div>
<script>
var $hover = $("div.perimgleft img");
$hover1 = $("#Contact div[class='perimgleft'] div");$hover2 = $("#About div[class='perimgleft'] div");$hover3 = $("#Careers div[class='perimgleft'] div");
$("#selRound .myList").mouseover(function(evt) {
if(evt.currentTarget.id == 'fpn1'){
$hover1.css('display', 'block');
($hover2, $hover3).css('display', 'none');
}
else if(evt.currentTarget.id == 'fpn2'){
($hover1, $hover3).css('display', 'none');
$hover2.css('display', 'block');
}else {
($hover1, $hover2).css('display', 'none');
$hover3.css('display', 'block');
}
});
$("#selRound .myList").mouseout(function(evt) {
});
</script>
</body>
</html>
Need to clean up the code.
In HTML we set the ID for the contents we should hide/show
...
<div id="fpn1" class="perimgleft">
...
<div id="fpn2" class="perimgleft">
...
<div id="fpn3" class="perimgleft">
...
Then we use them as data attributes for list elements
<li data-show="#fpn1" class="myList">fpn1</li>
<li data-show="#fpn2" class="myList">fpn2</li>
<li data-show="#fpn3" class="myList">fpn3</li>
Then with jquery we hide all contents
$('.perimgleft').hide();
So that we'll show the right content related to the hovered element:
$('ul.clearfix.rouncorner li').mouseover(function(){
$('ul.clearfix.rouncorner li').removeClass("clsSect");
$(this).addClass("clsSect");
var contentId = $(this).data("show");
$('.perimgleft').hide();
$(contentId).show();
})
DEMO HERE
try this :
var $hover = $("div.perimgleft img");
$hover1 = $("#Contact div[class='perimgleft']>div");$hover2 = $("#About div[class='perimgleft']>div");$hover3 = $("#Careers div[class='perimgleft']>div");
$("#selRound .myList").mouseover(function(evt) {
if(evt.currentTarget.id == 'fpn1'){
$hover1.css('display', 'block');
$hover2.css('display', 'none');
$hover3.css('display', 'none');
}
else if(evt.currentTarget.id == 'fpn2'){
$hover3.css('display', 'none');
$hover1.css('display', 'none');
$hover2.css('display', 'block');
}else {
$hover2.css('display', 'none');
$hover1.css('display', 'none');
$hover3.css('display', 'block');
}
});
$("#selRound .myList").mouseout(function(evt) {
});
Are you looking something like this.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style type="text/css">
.mainBodyContent{
display: none;
}
</style>
</head>
<body>
<div id="selRound">
<ul class="clearfix rouncorner">
<li id="fpn1" class="myList">contact</li>
<li id="fpn2" class="myList">about</li>
<li id="fpn3" class="myList">careers</li>
</ul>
</div>
<div class="mainBodyContent" id="Contact">
<div class="perimgleft">
<img class="perImg" alt="This is for sample" />
<div id="thisID3">
<p><span>sample1</span>
</p>
<p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a>
</p>
</div>
</div>
</div>
<div class="mainBodyContent" id="About">
<div class="perimgleft">
<img class="perImg" alt="This is for sample" />
<div id="thisID2">
<p><span>sample2</span>
</p>
<p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a>
</p>
</div>
</div>
</div>
<div class="mainBodyContent" id="Careers">
<div class="perimgleft">
<img class="perImg" alt="This is for sample" />
<div id="thisID1">
<p><span>sample3</span>
</p>
<p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a>
</p>
</div>
</div>
</div>
<script>
var hover1 = $("#Contact");
var hover2 = $("#About");
var hover3 = $("#Careers");
$(".myList").mouseout(function(evt) {
$('.mainBodyContent').css('display','none');
});
$(".myList").mouseover(function(evt) {
var currentId=$(this).attr('id');
if(currentId=='fpn1'){
hover1.css({'display':'block'});
}
if(currentId=='fpn2'){
hover2.css({'display':'block'});
}
if(currentId=='fpn3'){
hover3.css({'display':'block'});
}
});
</script>
</body>
</html>