currently I'm trying like if I click on the tab it will change color instead of the standard color I set.How do I go about doing it because I'm using the toggle() function.
Currently I'm stuck at here.
$("li").click(function(){
$(this).css('background-color',"#6F0")
})
http://jsfiddle.net/eMLTB/112
Hide all .tabContent elements on page load and show them on click of li.
Write:
JS:
$("li").click(function () {
$($(this).find("a").attr("href")).toggle();
$(this).toggleClass("active");
});
CSS:
.active {
background-color:#6F0;
}
.tabContent {
display:none;
}
DEMO here.
Check the line of script where i placed a comment, I think after adding this solves your problem.
<div id="container">
<nav id="tabs">
<ul id ="ta" class="nav">
<li id="a">0</li>
<li id="b">5</li>
<li id="c">10</li>
</ul>
<div class="tabContent" id="tabs-1" >
<h2>Testing1</h2>
</div>
<div class="tabContent" id="tabs-2">
<h2>Testing2</h2>
</div>
<div class="tabContent" id="tabs-3">
<h2>Testing3</h2>
</div>
</nav>
And in your Script
var i;
$("li").each(
function(){
$(this).click(
function(){
i = $(this).find("a").attr("href");
$(i).toggle();
}
);
}
);
$("li").click(function(){
$('li').css('background-color',"#fff");//------>I set it #fff , you Can Put here your standard color code
$(this).css('background-color',"#6F0")
})
First, put the class attribute for <li> tag, example :
<ul id ="ta" class="nav">
<li id="a" class="navi">0</li>
<li id="b" class="navi">5</li>
<li id="c" class="navi">10</li>
</ul>
next, make your code like this :
$("li").click(function(){
$(".navi").css('background-color', "");
$(this).css('background-color', "#6F0");
});
I would suggest using the .toogleClass() method.
It is similar like .toogle() but better for CSS manipulation.
First create class in your CSS that will represent your color and then toogle that class.
http://api.jquery.com/toggleClass/
Related
I've the following code :
<div class=myClass>
Click for option Tata
</div>
<div class="selectMultiContent">
<ul class="selectMultiList library">
<li data-value="517" class="">Tata</li>
<li data-value="389" class="">Titi</li>
<li data-value="387" class="">Toto</li
</ul>
</div>
When I'm clicking on 'a' link, I want to simulate a click on the fisrt 'li' with a trigger.
But how to do that ? I'm looking to use triggers, but it seems difficult to use in this case.
Could you help me please ?
You can have a click handler which can select the li based on its data-value attribute like
$('#click').click(function(){
$('.selectMultiList li[data-value="517"]').click()
})
You can do it by calling a JS method:
Click for option Tata
function clickOnOption(activeElement){
$('.selectMultiList li[data-value="'+activeElement+'"]').click();
}
Using jQuery you can make it quite dynamic, just make sure the class and data-item attribute match
As an example I just made it alert the data value. If you change data-item to "titi" it would alert 389
Example:
$('.clicker').on('click', function (e) {
$('.' + $(this).attr('data-item')).trigger('click');
});
$('.library li').on('click', function () {
alert($(this).attr('data-value'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myClass">
Click for option Tata
</div>
<div class="selectMultiContent">
<ul class="selectMultiList library">
<li data-value="517" class="tata">Tata</li>
<li data-value="389" class="titi">Titi</li>
<li data-value="387" class="toto">Toto</li>
</ul>
</div>
I have a list panel with different words each word explains a div to the right.
I'm trying to change the opacity of the matching div to 1.0 when hovering the matching word.
<html> #HTML SETUP
<div class="Settings">
<ul>
<li class="SettingsSlideshow">
<h3>Slideshow</h3>
</li>
<li class="SlideshowImage">
<h4>Image</h4>
</li>
<li class="SlideshowTitle">
<h4>Title</h4>
</li>
</ul>
</div>
<div class="Slideshow">
</div>
</html>
<script type="text/javascript"> #JAVASCRIPT
$(function(){
$(".SettingsSlideshow").hover(function(){
$(".Slideshow").css({opacity: 1.0});
});
});
</script>
This is just one example of what I'm trying to achieve. This don't work, Do I need to define x:hover in css as well? I have defined a opacity: 0.7 on each div in css. Mabye I need to define it: (".Settings ul li SettingSlideshow")?
Thanks for help!
<script type="text/javascript">
$(function(){
$(".SettingsSlideshow").hover(function(){
$(".Slideshow").css({opacity: 1.0});
},function(){
$(".Slideshow").css({opacity: 0.0});// here set your rest opacity between 0 to 1
});
});
</script>
reference hover
I want yo Change a color of nave when user click on other nav button i don't no how can i do this by code here is a image below:
when user click in abut then that color should be change in orange and home page active orange color will be black and about will be orange. i want to do this by JavaScript. here is a code lines below.
<div class="container clearfix">
<nav id="menu" class="navigation"
role="navigation" style="float: left">
Show navigation
<ul id="nav">
<li class="active">Home</li>
<li>About</li>
<li>T-P</li>
<li>M-P</li>
<li>B-M</li>
<li>R-B</li>
<li>L-C</li>
</ul>
</nav>
</div>
i use this JavaScript for change this.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
var make_button_active = function()
{
//Get item siblings
var siblings =($(this).siblings());
//Remove active class on all buttons
siblings.each(function (index)
{
$(this).removeClass('active');
} )
//Add the clicked button class
$(this).addClass('active');}
//Attach events to menu
$(document).ready(
function()
{
$(".menu li").click(make_button_active);
} )
</script>
but nothing happen please let me know how can i do this. anyone have any Idea?
Thank You
There are a number of issues here. For one menu is the value of an id so you would need to reference it in jquery with $('#menu"). Below is a working version of your code. I had to remove the href attributes to achieve the desired style change with minimal effort. You now have two choices:
Use this code and swap content dynamically using javascript and css display property
On each page in your site modify the markup, to set the active nav item; with this approach the javascript is not necessary.
<htmL>
<head>
<script type="text/javascript">
var make_button_active = function(){
//Get item siblings
var siblings =($(this).siblings());
//Remove active class on all buttons
siblings.each(function (index){
$(this).removeClass('active');
});
//Add the clicked button class
$(this).addClass('active');
}
//Attach events to menu
$(document).ready(function(){
$("li").click(make_button_active);
});
</script>
<style>
.active{
background-color: red;
}
</style>
</head>
<body>
<div class="container clearfix">
<nav id="menu" class="navigation"
role="navigation" style="float: left">
Show navigation
<ul id="nav">
<li class="active"><a>Home</a></li>
<li><a >About</a></li>
<li><a >T-P</a></li>
<li><a >M-P</a></li>
<li><a >B-M</a></li>
<li><a >R-B</a></li>
<li><a >L-C</a></li>
</ul>
</nav>
</div>
</body>
</html>
Hi more simple way to chafe class in li
string thisURL = this.Page.GetType().Name.ToString();
switch (thisURL)
{
case "home_aspx":
lihome.Attributes.Add("class", "Active");
break;
case "support_aspx":
lisupport.Attributes.Add("class", "Active");
break;
case "logout_aspx":
lilogout.Attributes.Add("class", "Active");
break;
}
need to do this code on load event of page and it will working that vote for this solution=)
I am currently working on building a small menu that will change divs based upon which one it clicked. So if one is clicked it will show the div associated with it and hide the others, ect. But I cannot get it to work, nor can I figure out why. Any help would be appreciated. Thanks.
Below is my code. I've clipped out the content as there was a lot of it.
<script type="text/javascript">
$('.mopHeader').click(function() {
$('#raid-progress-mop').show();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').hide();
});
$('.cataHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').show();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').hide();
});
$('.wotlkHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').show();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').hide();
});
$('.tbcHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').show();
$('#raid-progress-vanilla').hide();
});
$('.vanillaHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').show();
});
</script>
<span class="h4">Raid Progress <span class="mopHeader">MoP</span> <span class="cataHeader">Cata</span> <span class="wotlkHeader">WotLK</span> <span class="tbcHeader">TBC</span> <span class="vanillaHeader">WoW</span></span>
<div id="raid-progress-mop">
<ul id="raid-mop">
<li>Content A</li>
</ul>
</div>
<div id="raid-progress-cata">
<ul id="raid-cata">
<li>Content B</li>
</ul>
</div>
<div id="raid-progress-wotlk">
<ul id="raid-wotlk">
<li>Content C</li>
</ul>
</div>
<div id="raid-progress-tbc">
<ul id="raid-tbc">
<li>Content D</li>
</ul>
</div>
<div id="raid-progress-vanilla">
<ul id="raid-vanilla">
<li>Content E</li>
</ul>
</div>
Wrap your code in:
$(function(){ ... });
...which is the short form of:
$(document).ready(function(){ ... });
Cheers
You need to put the script underneath your markup. Either that, or put it inside document.ready callback:
$(document).ready(function() {
// code here
});
The problem is that when the script appears above the markup, it will execute before the HTML is loaded, and so the browser won't yet know about raid-progress-mop, etc.
How about doing that a little more dynamically inside a ready() function :
<script type="text/javascript">
$(function() {
$('[class$="Header"]').on('click', function() {
var myClass = $(this).attr('class').replace('Header', '');
$('[id^="raid-progress"]').hide();
$('#raid-progress-' + myClass).show();
});
});
</script>
jsBin demo
Wrap your code into a ready finction and this code I wrote is all you need:
$(function(){
$('span[class$="Header"]').click(function(){
var classNameSpecific = $(this).attr('class').split('Header')[0];
$('div[id^="raid-progress-"]').hide();
$('#raid-progress-'+classNameSpecific).show();
});
});
Explanation:
$('span[class$="Header"]') = target any span element which class ends with Header
Now just attach a click handler to all that spans.
Than, to hide all your div elements do:
$('div[id^="raid-progress-"]').hide(); = will hide any div which id starts with raid-progress-
and than you just need to target the div that contains the magic word:
$('#raid-progress-'+classNameSpecific).show();
$('.mopHeader') isn't defined yet. wrap your script with $(function(){...})
I am trying to create a menu navigation sort of like tab's but with vertical buttons.. When I start the page, the first li class is removed and when I click any other link nothign happens other then my content div's being shown..
The first link should always be active on page start.
<script type="text/javascript">
$(document).ready(function() {
var tabContainers = $('div.pages > div');
$('div.sidemenu ul.list a').click(function () {
tabContainers.hide().filter(this.hash).show();
$('div.sidemenu ul.list li').removeClass('active');
$(this).addClass('active');
return false;
}).filter(':first').click();
});
</script>
<div class="sidemenu">
<ul class="list">
<li class="active">Login & Password</li>
<li>Contact Details</li>
<li>Company & Branch Details</li>
<li>Address Details</li>
</ul>
</div>
<div class="pages">
<div id="first">
CONTENT 1
</div>
<div id="second">
CONTENT 2
</div>
<div id="third">
CONTENT 3
</div>
<div id="forth">
CONTENT 4
</div>
</div>
Not sure what I am missing here.. Maybe its cuase I just woke up and still on my first cup of coffee.. ;)
You're adding the class to the <a> element, but removing it from its parent <li> element.
$(this).addClass('active'); // "this" is the <a> that received the event
// This removes "active" from the <li>
$('div.sidemenu ul.list li').removeClass('active');
Looks like you intend for the <li> to have the class. So you'd do this instead:
$(this).parent().addClass('active');
Or if you don't mind me mixing a little DOM API in:
$(this.parentNode).addClass('active');
Now go get a refill! ;o)
you add the "active" class to the A-Element
$(this).addClass('active');
i guess you want to add it to the LI-Element, so either you add
$(this).parent().addClass('active');
or you register the onclick on the LI-Element