I am designing a widget style using HTML ul tag.
<div class='tabs' style='width:50%'>
<ul>
<li id="basic-li"><a href='#basic_information'>Basic</a></li>
<li id="master-passenger-li"><a href='#master_passenger'>Master Passenger</a></li>
<li id="other-passenger-li"><a href='#all_passengers'>Other Passengers</a></li >
<li id="confirm-li"><a href='#confirm'>Confirmation</a></li>
</ul>
And I have 4 divs.
<div id="basic_information" class="tab">//content</div>
<div id="master_passenger" class="tab">//content</div>
<div id="other-passenger" class="tab">//content</div>
<div id="confirm" class="tab">//content</div>
I only want to show the li's href div that has currently been clicked. I only want to use HTML / CSS and jQuery.
This is the basic idea. You can improvise as per your need. I have set the target li's id as data attribute in to div where you will click. Now on click of that div i gets li's id so we can make that shown and all else li hide.
$(document).ready(function(){
$('.tab').click(function(){
$('.tabs li').hide();
var idTab = $(this).data('id');
$('#' + idTab).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='tabs' style='width:50%'>
<ul>
<li id="basic-li"><a href='#basic_information'>Basic</a>
</li><li id="master-passenger-li"><a href='#master_passenger'>Master Passenger</a>
</li><li id="other-passenger-li"><a href='#all_passengers'>Other Passengers</a>
</li ><li id="confirm-li"><a href='#confirm'>Confirmation</a></li>
</ul>
</div>
<div id="basic_information" data-id="basic-li" class="tab">//basic info</div>
<div id="master_passenger" data-id="master-passenger-li" class="tab">//master passenger</div>
<div id="other-passenger" data-id="other-passenger-li" class="tab">//other passenger</div>
<div id="confirm" data-id="confirm-li" class="tab">//confirm</div>
Cheers...!!
This can be achieved via the following changes to your HTML, and the addition of the jQuery script below:
<ul>
<!-- add data-target attribute to each "a", with value matching corresponding tab -->
<li>
<a data-target="basic_information" href='#basic_information'>Basic</a>
</li>
<li>
<a data-target="master_passenger" href='#master_passenger'>Master Passenger</a>
</li>
<li>
<a data-target="other-passenger" href='#all_passengers'>Other Passengers</a>
</li>
<li>
<a data-target="confirm" href='#confirm'>Confirmation</a>
</li>
</ul>
<div id="basic_information" class="tab">//content</div>
<div id="master_passenger" class="tab">//content</div>
<div id="other-passenger" class="tab">//content</div>
<div id="confirm" class="tab">//content</div>
<script>
$(function() {
// Hide all tabs by default
$('.tab').hide()
// Assign click handler to all elements with data target attribute
$('[data-target]').click(function() {
// Hide all tabs
$('.tab').hide()
// Extra target id of the menu link that was clicked
var tabToShow = $(this).data('target')
// Show the corresponding tab
$('#' + tabToShow).show()
// Return false to prevent default navigation behaviour of links
return false
})
})
</script>
Related
<li>
<div id="lineop1"><h3>Softshell</h3></div>
</li>
<li>
<div id="lineop1"><h3>Option</h3></div>
</li>
<li>
<div id="lineop1"><h3>Option 1</h3></div>
</li>
I need to show which one h3 tag is clicked to show active
You need to do it like below:-
$(document).ready(function(){
$('.lineop1 a h3').click(function(e){
e.preventDefault(); // to prevent page refresh with new url
$('h3').removeClass('active'); // remove active class from other h3 tag
$(this).addClass('active'); // add active class to current clicked tag
});
});
.active{
color:green;
font-size:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
<div class="lineop1"><h3>Softshell</h3></div>
</li>
<li>
<div class="lineop1"><h3>Option</h3></div>
</li>
<li>
<div class="lineop1"><h3>Option 1</h3></div>
</li>
Note:- id need to be unique per element. so convert id to class around <div's>
And if you want that after click on h3 when page refresh, then also the corresponding h3 tag have the active class, then you have to use localstorage concept like below:-
jQuery:-
$(document).ready(function(){
$('ul li').eq( localStorage.parent ).find('h3').addClass('active');
$('.lineop1 a h3').click(function(e){
var pagename = $(location).attr("href").split('/').pop();
localStorage.parent=$(this).closest('li').index();
});
});
Html:-
<ul>
<li>
<div class="lineop1"><h3>Softshell</h3></div>
</li>
<li>
<div class="lineop1"><h3>Option</h3></div>
</li>
<li>
<div class="lineop1"><h3>Option 1</h3></div>
</li>
</ul>
I have tested it on localhost at my end and working perfectly fine.
add a click handler to h3. Add class active to it.
$(document).ready(function(){
$(document).on('click','h3',function(){
$('h3').removeClass('active');
$(this).addClass('active');
});
});
.active{
color:#ff00eb;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li>
<div id="lineop1"><h3>Softshell</h3></div>
</li>
<li>
<div id="lineop1"><h3>Option</h3></div>
</li>
<li>
<div id="lineop1"><h3>Option 1</h3></div>
</li>
Edit: its always good practice to attach click event to the closest unique parent element. so I have included $(document).On.
Follow this link to see working of Direct Vs Deletegated Events
I am trying to take content from a nav bar, and then modify and append it to a mobile menu. The nav bar html looks like
<div id="top_bar" class="nav">
<div class="container">
<div class="row">
<nav class="clearfix">
<span>My Account</span>
<span> Rewards</span>
<span>Customer Service</span>
</nav>
</div>
</div>
</div>
I need to append the anchors above to the following menu and have them work in the format below.
<ul id="stmobilemenu" class="visible-xs visible-sm show">
<li class="stmlevel0">first</li>
<li class="stmlevel0">second</li>
<li class="stmlevel0">third</li>
</ul>
I tried to do this like
var add_to_menu;
$('#top_bar nav a').each(function(){
var line = '<li class="stmlevel0">';
$(this).addClass('ma_level_0');
line += $(this).html();
line += '</li>';
add_to_menu += line;
})
$('#stmobilemenu').append(add_to_menu);
The result of this was it added undefined, then it added only the content
so appeneded was in this type of format.
<li class="stmlevel0"><span>My account</span></li>
what I want it to add is in this type
<li class="stmlevel0"><span>My account</span></li>
Another thing I tried was
$('#stmobilemenu').append(
$('#top_bar nav a').each(function(){
$(this).prepend('<li class="stmlevel0">');
$(this).addClass('ma_level_0');
$(this).append('</li>');
}));
I had a few problems with this though, first of all the append and prepend were not actually surrounding the html I want. It comes out like
<a href="http://127.0.1.1:8080/my-account" class="top-bar-link ma_level_0">
<li class="stmlevel0"></li>
<span>My account</span>
</a>
So I need that li to actually surround the a. Also it actually removed the content of #top_bar nav a from its original spot, which is not what I want it to do. I want it only to copy and add to the mobile menu. Can someone help?
Use clone() to make a copy of each <a>
var $mobMenu= $('#stmobilemenu');// store reference to menu element
$('#top_bar nav a').each(function(){
var $link = $(this).clone().removeClass().addClass('ma_level_0');
$('<li class="stmlevel0">').append($link).appendTo( $mobMenu);
});
var anchors = $('#top_bar nav').children();
anchors.each(function(){
var $this = $(this),
$li = $('<li class="stmlevel0"></li>');
$this.removeClass().addClass('ma_level_0').appendTo($li);
$li.appendTo('#stmobilemenu');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top_bar" class="nav">
<div class="container">
<div class="row">
<nav class="clearfix">
<span>My Account</span>
<span> Rewards</span>
<span>Customer Service</span>
</nav>
</div>
</div>
</div>
<ul id="stmobilemenu" class="visible-xs visible-sm show">
<li class="stmlevel0">first</li>
</ul>
I'm trying to get the contents of a div and display them as the last li on a ul for a mobile menu. The markup for the content is generated with php so I can't simply append html.
I have tried using sethtml and append without success.
This is my attempt:
$("#mobile-menu li").last().append($("#header-top-widget-area-2 div").innerHTML);
Here is the markup generated with php that I need to display as the last li in mobile menu:
<div class="ewf-span6 text-right" id="header-top-widget-area-2">
<div id="text-3" class="widget widget_text">
<h3 class="widget-title"><span> </span></h3>
<div class="textwidget">
<ul class="social-icons">
<li class="facebook"><img class="social-icon" src="/wp-content/uploads/2014/05/fb_responsive.png" alt="facebook-icon"></li>
<li class="linkedin"><img class="social-icon" src="/wp-content/uploads/2014/05/linkedin_responsive.png" alt="linkedin-icon"></li>
<li class="twitter"><img class="social-icon" src="/wp-content/uploads/2014/05/twitter_responsive.png" alt="twitter-icon"></li>
</ul>
<ul class="green-menu">
<li>Contact Us</li>
<li class="border">Blog</li>
</ul>
</div>
</div>
</div>
You need to create a new <li> element, populate it with your content, and append it to your <ul> element:
var newLi = $("<li />");
newLi.html($("#header-top-widget-area-2 div")[0].innerHTML);
$("#mobile-menu").append(newLi);
The li items are clickable divs with data-filter attributes. When clicked, I need jQuery to figure out if any of the li items data-filter attributes match with any divs in the "filteringResults" container. Which will then go on to the "filteringResults" container only showing divs which match with any of the selected li items data-filter attributes.
<li data-filter='clm, ebusiness, seo'>
<div class="itemcontainer">
<img src="site-resources/images/chat-32W.png" alt="">
<div class="tick"></div>
</div>
<p>Engage</p>
</li>
<li data-filter='clm, facebookads, website'>
<div class="itemcontainer">
<img src="site-resources/images/engineering-32W.png" alt="">
<div class="tick"></div>
</div>
<p>Manage</p>
</li>
<ul id="filteringResults">
<li id="clm">CLM</li>
<li id="ebusiness">EBusiness</li>
<li id="seo">SEO</li>
<li id="website">Webite</li>
<li id="facebookads">Facebook Ads</li>
</ul>
Any help would be much appreciated.
Thanks
You can use attribute contains selector like this
$("li").click(function () {
alert($("[data-filter*=" + this.id + "]").data("filter"));
});
Fiddle
I wonder if someone could please help me.
I'm trying to add a class of 'active' to a div with the same id as a link. When the page loads the first div will be active but I then want to click on a link and add a class of active to a div on the page so I display this div.
HTML:
<ul id="items">
<li>
item 1
</li>
<li>
item 2
</li>
<li>
<a href="#" id="3" item 3</a>
</ul>
<div id="product-info">
<div id="1" class="active">
product info
</div>
<div id="2">
product info
</div>
<div id="3">
product info
</div>
</div>
jQuery:
var buttons = $('#items').find('a');
buttons.click(function(){
var id = $(this).attr('id');
var product = $('product-info div');
var productId = product.attr('id');
product.removeClass('active');
}
I'm guessing I need to add an if statement here to say something like if id equal to product id add class
I've tried a few variations but just can't get it. Any help to solve this would be fantastic. If you want to go one step further and suggest a better way I'm all ears.
Thanks in advance
$( 'li' ).on( 'click', function() {
$('div').eq( $(this).index() ).addClass( 'active' );
});
But you need more restrictive to selectors.
If you want to show only one div at a time :
$( 'li' ).on( 'click', function() {
$('div').removeClass( 'active' ).eq( $(this).index() ).addClass( 'active' );
});
I usually do this by setting the href of the link tag to point at the id of the target element and then use the href attribute inside the jQuery function. So, something like:
HTML:
<ul id="items">
<li>
item 1
</li>
<li>
item 2
</li>
<li>
item 3
</ul>
<div id="product-info">
<div id="1" class="active">
product info
</div>
<div id="2">
product info
</div>
<div id="3">
product info
</div>
</div>
jQuery:
$("#items").find("a").click(function(e) {
$("#product-info").find("div").removeClass("active"); $(e.href).addClass("active", true);
});
I hope you will not get me wrong, but you shouldn't have elements with the same id. Id's are the means of "identification" and because of that they need to be unique: https://stackoverflow.com/a/9454716/880114
Arguably, browser implementations are to blame here, because of being too loose on such important rules' following.
html
what i understand you want to replace and hide your divs depending on link click.That way You dun need same ids for more than one id :)
here class hide should b display:none; that will work for you
<ul class="au-img">
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>
<div class="default-text"></div>
<div class="about-1" >1</div>
<div class="about-2 hide" >2</div>
<div class="about-3 hide" >3</div>
javascript
<script type="text/javascript">
$('.au-img li').on("click", function(e) {
var $this = $(this),
$id = $this.attr('id'),
$class = '.' + $('.about-' + $id).attr('class').replace('hide', '');
$('.default-text').addClass('hide');
$('.about-' + $id).removeClass('hide');
$('div[class*=about]').not($class).addClass('hide');
});
</script>