I am very new to jquery.
I just need to update div content and link url on single click.
here I am working on this code.
<ul>
<li>$14.50</li>
<li>$15.50</li>
<li>$16.50</li>
<li>$20.50</li>
</ul>
I need to update price div based on above link click.
<div class="price">$0.00</div>
<a class="buy" href="">Pay Now</a>
Thanks
You can try something like"
$(".price").on('click', function(){
var clickedPrice = $(this).data('price');
$('#result_price').html("$" + clickedPrice);
});
<ul>
<li class="price">$9</li>
<li class="price">$5</li>
<li class="price">$3</li>
</ul>
<div id="result_price">$0</div>
Use .class selector and .attr() to change the href.
$('ul > li').click(function(){
$('.price').html($(this).text());
$('.buy').attr('href', 'http://google.com');
});
$('ul > li').click(function(){
$('.price').html($(this).text());
$('.buy').attr('href', 'http://google.com');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>$14.50</li>
<li>$15.50</li>
<li>$16.50</li>
<li>$20.50</li>
</ul>
<div class="price">$0.00</div>
<a class="buy" href="">Pay Now</a>
You can update price div based on ul > li > a click. Try below code
$(document).on('click', 'ul > li > a', function(){
$('.price').text($(this).text());
});
$(document).on('click', 'ul > li > a', function(){
$('.price').text($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>$14.50</li>
<li>$15.50</li>
<li>$16.50</li>
<li>$20.50</li>
</ul>
<div class="price">$0.00</div>
<a class="buy" href="">Pay Now</a>
Thank you.
Related
On a form, I have to select all first <a> elements with a specific attribute value from all the list items present in the form. For instance, in the below code, I have to select <a> elements with the content xxx and zzz — or in other words, the first <a> element with data-role="modal" from all list items.
console.log($('ul li a[data-role="modal"]:first'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a data-role="modal">xxx</a>
<a data-role="modal">yyy</a>
</li>
<li>
<a>abc</a>
<a data-role="modal">zzz</a>
<a data-role="modal">xyz</a>
</li>
</ul>
The jQuery I tried is only selecting the one with xxx.
You can use .find() to get all a elements with attribute data-role=modal in ul li and apply :eq to get first for each match:
$('ul li').find('a[data-role="modal"]:eq(0)').css('color', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a data-role="modal">xxx</a>
<a data-role="modal">yyy</a>
</li>
<li>
<a>abc</a>
<a data-role="modal">zzz</a>
<a data-role="modal">xyz</a>
</li>
</ul>
References
.find()
:eq
Check this
$('document').ready(function(){
$('ul li').each(function(){
$(this).find('a[data-role=modal]:first').css('background-color','red');
});
});
I guess this may help
$('document').ready(function(){
$('ul li').each(function(){
$(this).find('a[data-role="modal"]').first().css('background-color','red');
});
});
Try:
$('ul li').find('a[data-role="modal"]:first')
console.log( $('ul li').find('a[data-role="modal"]:first').map(function() {
return $(this).text();
}).get() );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>
<a data-role="modal">xxx</a>
<a data-role="modal">yyy</a>
</li>
<li>
<a>abc</a>
<a data-role="modal">zzz</a>
<a data-role="modal">xyz</a>
</li>
</ul>
Hi I have a navbar in my home.scala.html as follows-
<ul class="nav nav-justified">
<li>#Messages("views.main.apps")</li>
<li >#Messages("views.main.activity")</li>
<li>#Messages("views.main.devices")</li>
<li>#Messages("views.main.account")</li>
<li id="logout">#Messages("views.main.logout")</li>
</ul>
I am trying to set active class on click as follows-
<script>
$(document).ready(function () {
$('ul.nav > li').click(function (e) {
$('ul.nav > li').removeClass('active');
$(this).addClass('active');
});
});
</script>
However on running the application only the li elements which have href="#" get set as active ,the other li elements remain inactive on click even though the page is redirected to the link of the tag.
Any help would be appreciated.
Thanks
Edit:The structure of the main.scala.html is
<html>
<head></head><body>
<ul class="nav nav-justified">
<li>#Messages("views.main.apps")</li>
<li >#Messages("views.main.activity")</li>
<li>#Messages("views.main.devices")</li>
<li>#Messages("views.main.account")</li>
<li id="logout">#Messages("views.main.logout")</li>
</ul>
</div>
</nav>
<div id="showsspData">
#content
</div>
</div>
</body>
</html>
Then the apps.scala.html will be as-
#main("string to pass"){
//html content for page
}
You need to use e.preventDefault() to prevent default action of the anchor and target .click() handler on the anchors instead:
$(document).ready(function () {
$('ul.nav > li a').click(function (e) {
e.preventDefault();
$('ul.nav > li').removeClass('active');
$(this).closest('li').addClass('active');
});
});
I have a toggle slide which does not work. Spend hours trying/learning to edit and rewrite this thing, but somehow the visbible and inviseble slidetoggle doesnt work.
Could someone please help me with the js script: SEE THE FIDDLE
JS:
$('.header .ullie').hide();
$('.header h2 a').click(function() {
$(".header h2").not(this).next(".header .ullie").slideUp("slow");
$(this).next(".header .ullie").slideToggle("slow");
return false;
});
$('.header h3 a').click(function() {
$(".header h3").not(this).next(".header .ullie").slideUp("slow");
$(this).next(".header .ullie").slideToggle("slow");
return false;
});
HTML:
<div id="foldercontents">
<ul class="ullie">
<li class="header">
<h2>testbutton</h2>
<ul class="ullie">
<li class="foldercontent">
<h3>title</h3>
<ul class="ullie"><li>row 1</li></ul>
</li></ul>
</li>
<!-- second, duplicated from first -->
<li class="header">
<h2>testbutton2</h2>
<ul class="ullie">
<li class="foldercontent">
<h3>title</h3>
<ul class="ullie"><li>row 2</li></ul>
</li></ul>
</li>
</ul>
</div>
SEE THE FIDDLE
*ADDED JQUERY LIBRARY
I assume you're looking for something like this
$('ul li ul').hide();
$('.header > * > a, .foldercontent > * > a').click(function () {
$(this).parent().siblings().slideToggle("slow");
});
You could also use margin:0; padding:0; to prevent the jumping instead of overflow:hidden, but that's up to you
Also note that you don't need the <a> tags, you could apply them to just the headers themselves if you'd like to
i'm having some trouble.
I'm doing an asp.net mvc3 application and i downloaded some css menu, the thing is i want to keep the menu active after menu tab its clicked and only change when another one is clicked.
here's the code of the menu on _Layout.cshtml
<nav>
<div class="cssmenu">
<ul>
<li class='active'><span>#Html.ActionLink("Início", "Index", "Home")</span></li>
<li><span>#Html.ActionLink("Tarefas Contabilidade", "SelectEmpresa", "Empresa")</span></li>
<li><a href='#'><span>Clientes</span></a>
<ul>
<li><span>#Html.ActionLink("Listar clientes", "ListarEmpresas", "Empresa")</span></li>
</ul>
</li>
<li><a href='#'><span>Balancetes</span></a>
<ul>
<li><span>#Html.ActionLink("Listar registos", "ListaBalancetesPorSalaoMes", "Balancete")</span></li>
</ul>
</li>
<li><span>#Html.ActionLink("Sobre", "About", "Home")</span></li>
</ul>
</div>
</nav>
and i have this script:
<script type="text/javascript">
$("li").click(function () {
$("li").removeClass("active");
$(this).addClass("active");
});
</script>
the first tab that i put there class= "active" works, but the script doesn't seem to work when i click another menu tab, it only shows the first one active
a little help please :)
UPDATED
This is the rendered html:
<nav>
<div class="cssmenu">
<ul>
<li><span>Início</span></li>
<li><span>Tarefas Contabilidade</span></li>
<li><a href='#'><span>Clientes</span></a>
<ul>
<li><span>Listar clientes</span></li>
<li><span>Listar salões</span></li>
<li><span>Gerir empregados</span></li>
<li><span>Novo cliente</span></li>
<li><span>Novo salão</span></li>
</ul>
</li>
<li><a href='#'><span>Balancetes</span></a>
<ul>
<li><span>Listar registos</span></li>
<li><span>Upload novo balancete</span></li>
<li><span>Mapa Resultados/Gráfico</span></li>
<li><span>Mapas Contabilidade/Gestão</span></li>
<li><span>Análise Rentabilidade</span></li>
<li><span>Alterar taxas</span></li>
</ul>
</li>
<li><span>Sobre</span></li>
</ul>
</div>
</nav>
i dont know if i should put the javascript inside the div or something xD
Ty
You can use child selector which selects all direct child elements, Try the following:
$(document).ready(function(){
$(".cssmenu > ul > li").click(function () {
$(this).siblings().removeClass("active");
$(this).addClass("active");
});
})
If you want to select the li tags of the inner ul tags, you can try:
$(document).ready(function() {
$("ul:eq(1) > li").click(function() {
$('ul:eq(1) > li').removeClass("active");
$(this).addClass("active");
});
})
Can you try:
<script type="text/javascript">
$("li a").bind('click', function () {
$("li").removeClass("active");
$(this).addClass("active");
});
</script>
li items are not clickable, so you must bind the click event to a.
try
$("li").click(function (e) {
e.preventDefault();
$(this).siblings().removeClass("active").end().addClass("active");
});
If I have html such as:
<ul id="tags">
<li>
Toggle
<div>Content1</div>
</li>
<li>
Toggle
<div>Content2</div>
</li>
</ul>
How can I write a JQuery select/click event such that each link toggles the div below it?
$('#tags li a').click(function(){
$('#tags '+this.parent()+' div').slideToggle();
});
Tried something like that but its not giving me the results. Any help?
$('#tags li a').click(function(){
$(this).siblings("div").slideToggle();
});
or
$('#tags li a').click(function(){
$(this).next("div").slideToggle();
});
$('#tags li a').click(function(){
$(this).next('div').slideToggle();
});
[RE-EDIT]:
<script src="jquery.js"></script>
<ul id="tags">
<li style="display: none">
toggle
<div>Content1</div>
</li>
<li>
toggle
<div>Content2</div>
</li>
</ul>
<script>
$('ul li a').click(function(){
$("ul li").slideToggle('slow');
});
</script>
[OLD]:
<ul id="tags">
<li style="display: none">
<div>Content1</div>
</li>
<li>
<div>Content2</div>
</li>
</ul>
Toggle
<script>
$('.toggle').click(function(){
$("ul li").slideToggle('slow');
});
</script>