I have a problem with my webpage, my main problem is with Bootstrap and JQuery working together.
$("ul.pagination li:not(.active) a").on("click",function(){
$(".pagination li.active").removeClass("active");
$(this).parent().addClass("active");
$(".page").hide();
$("#"+$(this).text().toLowerCase()+"Page").show(); });
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class='pagination'>
<li class='active'>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>Outside</a>
</li>
<li>
<a href='#'>Fort</a>
</li>
<li>
<a href='#'>Settings</a>
</li>
</ul>
As you can see, it works fine. Until you attempt to move back to the page that was initially active. I also have the code I use for switching pages in the snipped, does anyone has a fix for this?
Change your original selector to
$("ul.pagination li a").on("click",function(){
Otherwise, you aren't binding a click event.
$("ul.pagination li a").on("click",function(){
$(".pagination li.active").removeClass("active");
$(this).parent().addClass("active");
$(".page").hide();
$("#"+$(this).text().toLowerCase()+"Page").show(); });
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class='pagination'>
<li class='active'>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>Outside</a>
</li>
<li>
<a href='#'>Fort</a>
</li>
<li>
<a href='#'>Settings</a>
</li>
</ul>
That's because you are attaching the onclick event only for the not active elements (excluding the first active). You have to make all elements clickable and check if the clicked element is not active inside your handler:
// Add a handler to all elements
$("ul.pagination li a").on("click",function(){
var clicked = $(this);
if(!clicked.parent().hasClass("active")) {
// Do what you want
}
});
Related
i have a problem
first this is my code
$('.boxColor ul li').click(function () {
$("link[href*='default']").attr('href', $(this).attr("data-color"));
});
<section class="boxColor">
<i class="fa fa-cog" aria-hidden="true"></i>
<ul>
<li data-color='css/color/alizarin.css'></li>
<li data-color='css/color/amethyst.css'></li>
<li data-color='css/color/concrete.css'></li>
<li data-color='css/color/nephritis.css'></li>
<li data-color='css/color/orange.css'></li>
<li data-color='css/color/piteRiver.css'></li>
<li data-color='css/color/pumpkin.css'></li>
<li data-color='css/color/wetAsphalt.css'></li>
<li data-color='css/color/default_style.css'></li>
</ul>
</section>
the problem is when i click in the li to change the color,
the color changes just on the first click and when i click at another color is not work
the button of switch work just one time
The question doesn't include the <link> element in the HTML, but this is probably because after the first change, link[href*='default'] will no longer select any elements because the new href doesn't contain the string default.
I recommend giving the link element in question an ID so that it remains the same all the time:
HTML
<link rel='stylesheet' type='text/css' href='css/color/default_style.css' id='color_stylesheet'>
<!-- other stuff follows -->
JavaScript
$('.boxColor ul li').click(function () {
$('#color_stylesheet').prop('href', $(this).attr('data-color'));
});
I have a ul list that I added toggle to using Javascript
and set display to none using CSS and everything is working fine.
I am looking for the javacript to make the link display (not collapsed) on the next page
when the links under the parent menu is clicked. So they are collapsed by default but when any of the links
clicked and the page loads, the links would not be collapsed as it was initially when the page was first visited.
Here's my current markup
<ul>
<li>
Main Title
<ul>
<li>
link 1
</li>
<li>
link 2
</li>
<li>
link 3
</li>
</li>
</ul>
</ul>
<style>
ul li ul {
display: none;
}
</style>
<script>
$('li').click(function (e) {
$(this).children('ul').slideToggle();
e.stopPropagation();
});
</script>
JQuery Code
<script>
$(document).ready(function(){
$("#hideshow").hide(); //By Default li is hide
$("ul").click(function(){
$("#hideshow").slideToggle(1000);
});
});
</script>
HTML Code
<body>
<ul><li>Hide </li></ul>
<ul id="hideshow">
<li>link 1 </li>
<li> a href="#">link 2 </a></li>
<li>link 3 </li>
</ul>
</body>
I want to add a class to body when a link is clicked. This is easily done when the link is in the parent ul, but my problem is that i want to do that for the the link present in the child ul of parent li. Whenever I try to do this It has no effect.
What I am trying to do is as given below:
Script:
<script>
$(document).ready(function () {
$("ul.treeview-menu").find("a.links").click(function () {
$("body").addClass("sidebar-collapse");
});
});
</script>
<ul class="sidebar-menu nav nav-list" id="dashboard-menu">
<li class="treeview">
<a rel="tooltip" data-placement="right" target="_self" href="">
<span class="caption">Parent Link</span>
</a>
<ul class="treeview-menu">
<li>
child link
</li>
</ul>
</li>
<ul>
Thank you in advance.
Try with on('click',...), may be your Navigation will generate dynamically after load page so you have to use delegated event binding
$(document).ready(function () {
$(document).on('click','ul.treeview-menu a.links',function () {
$("body").addClass("sidebar-collapse");
});
});
<ul class="sidebar-menu nav nav-list" id="dashboard-menu">
<li class="treeview">
<a rel="tooltip" data-placement="right" target="_self" href="">
<span class="caption">Parent Link</span>
</a>
<ul class="treeview-menu">
<li>
child link
</li>
</ul>
</li>
<ul>
you have two issues:
1- this line //}); it was commented and was preventing your code from working.
2-when the hyperlink is clicked it refreshes the page and thus any class you've added to your previous html has been erased that's why you want be able to see any change.
try this:
<script>
$(document).ready(function () {
$("ul.treeview-menu").find("a.links").click(function (e) {
e.preventDefault()
$("body").addClass("sidebar-collapse");
});
});
</script>
<ul class="sidebar-menu nav nav-list" id="dashboard-menu">
<li class="treeview">
<a rel="tooltip" data-placement="right" target="_self" href="">
<span class="caption">Parent Link</span>
</a>
<ul class="treeview-menu">
<li>
child link
</li>
</ul>
</li>
<ul>
$(document).ready(function () {
$("ul.treeview-menu").find("a.links").click(function (e) {
e.preventDefault()
$("body").addClass("Enter your class name");
});
});
How can I filter the content of a div using data-filter and highlight current link at same time?
In this example the 'Item A' should be loaded as current item. The current item should have the text-bold class.
jsFiddle
<ul class="menu">
<li class="menu-list">
<a class="menu-list-link js-menu-list-link" href="#" data-filter="1">Item A</a>
</li>
<li class="menu-list js-menu-list">
<a class="menu-list-link js-menu-list-link" href="#" data-filter="2">Item B</a>
</li>
<li class="menu-list">
<a class="menu-list-link js-menu-list-link" href="#" data-filter="3">Item C</a>
</li>
</ul>
try this code:-
$(function(){
//this is for first page load
$('a[data-filter="1"]').addClass('text-bold');
filter(1);
//when click on anchor tag
$('.menu-list a').click(function(){
$('.menu-list a').removeClass('text-bold');
$(this).addClass('text-bold');
var data=$(this).data('filter');
filter(data);
});
});
and create a function:-
function filter(filter){
$('.container [data-filter]').hide();
$('.container [data-filter="'+filter+'"]').show();
}
Demo
I have toggle tree which responds on click i.e. show or hide UL>li. I want to hide all the UL --> li who has parent ul-li. To make it more obvious I have apply css background-color to red which I want to be hidden by when page loads but show when it click back.
https://jsfiddle.net/toxic_kz/vr84pd6u/
<div>
<ul class="treeview">
<li><a>System Administration</a></li>
<li>
<a>System Core</a>
<ul>
<li><a>f2</a></li>
<li>
<a>f3</a>
<ul>
<li><a>f4</a></li>
<li><a>f5</a></li>
<li><a>f6</a></li>
</ul>
</li>
<li>
<a>f7</a>
<ul>
<li>
<a>f8</a>
<ul>
<li>
<a>f10</a>
<ul>
<li><a>f11</a></li>
</ul>
</li>
</ul>
</li>
<li><a>f9</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a>MyFunctionA</a>
<ul>
<li>
<a>f12</a>
<ul>
<li><a>f13</a></li>
<li><a>f14</a></li>
</ul>
</li>
<li><a>f16</a></li>
</ul>
</li>
<li><a>Course Management</a></li>
</ul>
</div>
jQuery
<script type="text/javascript">
$(document).ready(function () {
$('.treeview li').each(function () {
if ($(this).children('ul').length > 0) {
$(this).addClass('parent');
}
});
// $('.treeview li.parent>ul li').css('display', 'none');
$('.treeview li.parent>ul li').css('background-color', 'red');
$('.treeview li.parent > a').click(function () {
$(this).parent().toggleClass('active');
$(this).parent().children('ul').slideToggle('fast');
});
});
</script>
If I understood your question correctly, this is what you want:
$(".treeview").find('ul').hide()
Place this in your $(document).ready function and it'll hide the underlying unordered list upon page load.