ok so my website has a navigation with an id #nav so I want to activate a tabber based on the click navigation list. The navigation #nav has an html like this:-
<ul id ="nav">
<li>Fred</li>
<li>Thom</li>
<li>Kay</li>
</ul>
now when Fred is clicked from the navigation, I want to activate this on the tabber which has an html like this
<ul class="tabs">
<li>Fred</li>
<li>Thom</li>
<li>Kay</li>
</ul>
and tab content like this:-
<div id="tab1" class="tab_content">Lorem</div>
<div id="tab2" class="tab_content">Ipsum</div>
<div id="tab3" class="tab_content">Dolor</div>
so I wrote the following line of jquery
$("#nav li").click(function() {
var hash = location.hash;
var sel = $("ul.tabs li a[href='" + hash + "'], ul#tabs li a[href='" + hash + "']");
if (sel.length) {
sel.addClass("active").parent().addClass("active"); //Activate tab
$(hash).show();
}
but it's not working :( what am I doing wrong guys?
Try
$(function(){
$("#nav li").click(function(event) {
var hash = $('a', this).attr('href');
var sel = $("ul.tabs li a[href='#" + hash + "']");
sel.trigger('click')
return false;
});
$('.tab_content').hide();
var tabllis = $('ul.tabs li');
tabllis.click(function(){
var $this = $(this).addClass('active');
var hash = $('a', this).attr('href');
tabllis.not($this).removeClass('active');
$('.tab_content').hide();
$(hash).show();
return false;
});
});
Demo: Plunker
Related
The function for finding the active menu option and showing the li with the matching data-type only works if the active class is on the first or second li. If I put the active class on the third or fourth li, no items show for either table.
How do I show all of the items with the data-type that matches the data-related value with the active class?
Note the click function works fine, the issue is showing the li for the active selection on load.
$(document).ready(function() {
//Retreive active list on load:::::::::::::::::::::::::::::::
$("[data-section='table']").each(function() {
var $container = $(this);
var item = $container.find(".billing__item");
var active = $container.find(".ladder__ul li.active");
var $id = item.attr("data-type");
var datarel = active.attr("data-related");
item.hide();
// Find out what Li has the active class, then return matching items on load:
if (datarel == "all") {
item.css("display", "flex");
}
if (datarel == $id) {
$(".billing__item[data-type='" + $id + "']").css("display", "flex");
}
});
//Retreive active list on Click:::::::::::::::::::::::::::::::
$(".ladder__ul li").on("click", function(e) {
e.preventDefault();
var $li = $(this);
var $table = $li.closest("[data-section='table']");
var $id = $li.attr("data-related");
$(".ladder__ul li.active").removeClass("active");
$(this).addClass("active");
$table.find(".billing__item").each(function() {
var $item = $(this);
var $type = $item.attr("data-type");
//Hide every list on load::
$item.hide();
if ($li.attr("data-related") == "all") {
$item.css("display", "flex");
}
if ($li.attr("data-related") == $type) {
$item.css("display", "flex");
}
});
});
});
li {
padding: .9rem;
border: 1px solid;
cursor: pointer
}
.active {
background: blue
}
[data-section='table'] {
border: 2px solid;
pading: 1.3rem
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-section="table">
<ul class="ladder__ul">
<li data-related="all">All</li>
<li data-related="one" class="active">One</li>
<li data-related="two">two</li>
<li data-related="three">three</li>
</ul>
<div class="billing__list">
<div class="billing__item" data-type="one">One</div>
<div class="billing__item" data-type="two">Two</div>
<div class="billing__item" data-type="one">One</div>
<div class="billing__item" data-type="three">Three</div>
</div>
</div>
<div data-section="table">
<ul class="ladder__ul">
<li data-related="all">All</li>
<li data-related="a">a</li>
<li data-related="b" class="active">b</li>
</ul>
<div class="billing__list">
<div class="billing__item" data-type="a">a</div>
<div class="billing__item" data-type="b">b</div>
<div class="billing__item" data-type="a">a</div>
<div class="billing__item" data-type="b">b</div>
</div>
</div>
I think the problem is because $id is not equal to datarel
The .attr() method gets the attribute value for only the first element in the matched set.
ref: https://api.jquery.com/attr/
So your $id variable is always one because that's how you layout your elements in the html and One is the value of the first element with attribute data-type
<div class="billing__item" data-type="one">One</div>
<div class="billing__item" data-type="two">Two</div>
<div class="billing__item" data-type="one">One</div>
<div class="billing__item" data-type="three">Three</div>
I believe you are complicating things with the $id, you don't need it
$("[data-section='table']").each(function () {
var $container = $(this);
var item = $container.find(".billing__item");
var active = $container.find(".ladder__ul li.active");
var datarel = active.attr("data-related");
item.hide();
// Find out what Li has the active class, then return matching items on load:
if (datarel == "all") {
item.css("display", "flex");
}
$(".billing__item[data-type='" + datarel + "']").css("display", "flex");
});
Using datarel directly should suffice.
The problem from id. Because you get $id from item.attr("data-type") but the item is multiple element so it alway to get the first item data. That why at first section it work, but the second section work incorrect.
So you need to change your code like this:
//Retreive active list on load:::::::::::::::::::::::::::::::
$("[data-section='table']").each(function() {
var $container = $(this);
var item = $container.find(".billing__item");
var active = $container.find(".ladder__ul li.active");
var datarel = active.attr("data-related");
item.hide();
// Find out what Li has the active class, then return matching items on load:
if (datarel == "all") {
item.css("display", "flex");
} else {
$(".billing__item[data-type='" + datarel + "']", $container).css("display", "flex");
}
});
I've been trying to figure this out for hours. I currently have a fixed nav for my anchor website. I would like the menu link background color to change when scrolling through each section. Like this: https://codepen.io/dbilanoski/pen/LabpzG . When I scroll through each section I only see the hover background color not the active state color. If you have any tips or advice, please advise.
Thank you!
var navLink = $(".nav-link"),
topMenuHeight = navLink.outerHeight() + 15,
//All list items
menuItems = navLink.find("a"),
//Anchors corresponding to menu items
scrollItems = menuItems.map(function() {
var item = $($(this).attr("href"));
if (item.length) {
return item;
}
});
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e) {
var href = $(this).attr("href")
offsetTop = href === "#" ? 0 : $(href).offset().top - topMenuHeight + 1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 300);
e.preventDefault();
});
// Bind to scroll
$(window).scroll(function() {
// Get container scroll position
var fromTop = $(this).scrollTop() + topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function() {
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length - 1];
var id = cur && cur.length ? cur[0].id : "";
if (navLink !== id) {
navLink = id;
// Set/remove active class
menuItems
.parent().removeClass("active")
.end().filter("[href='#" + id + "']").parent().addClass("active");
}
});
a {
color: inherit;
text-decoration: none;
}
a:hover {
color: #fa448c;
text-decoration: underline;
}
a:active {
background-color: #fa448c;
color: #fff;
}
li {
list-style-type: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<ul class="nav-list">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Products
</li>
<li class="nav-item">
Featured
</li>
<li class="nav-item">
Best Sellers
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
The trick of the codepen you've sent is that all sections have the same height. However, there's a more flexible way of doing that. Using this solution, you check for each section whether it's shown on the screen or not, and if it is, highlight its button in the navlist.
Add text to unordered list on keyup event of textarea and there should't be any li when there is no text in textarea
HTML:
<textarea id="activityText"></textarea>
<div id="qwe">
<ul>
<li id="textFromTextArea"></li>
</ul>
</div>
jQuery:
$("#activityText").keyup(function () {
$("#textFromTextArea").text($("#activityText").val());
})
If there is no text in textarea then there should't be any list, can it be possible with jQuery
https://ibb.co/gjpDTL
Option 1:
I moved id from li to ul. I removed li element since you want to do not show marker.
<div id="qwe">
<ul id="textFromTextArea">
</ul>
</div>
<textarea id="ActivityText"></textarea>
and js:
$("#ActivityText").keyup(function () {
var val = $(this).val();
if($("#textFromTextArea li").length===0) {
var $li = $("<li>");
$li.html(val);
$("#textFromTextArea").append($li);
} else {
$("#textFromTextArea li").html(val);
}
});
Option 2:
Show/hide li element, preserve actual HTML you wrote but I add a CSS class hide
<div id="qwe">
<ul>
<li id="textFromTextArea" class="hide"></li>
</ul>
</div>
<textarea id="ActivityText"></textarea>
css
.hide {
display: none;
}
and js
$("#ActivityText").keyup(function () {
var val = $(this).val();
var $li = $("#textFromTextArea");
if(val.length === 0) {
$li.addClass("hide");
} else {
$li.removeClass("hide");
}
$li.html(val);
});
Try this
HTML:
<textarea id="activityText"></textarea>
<div id="qwe">
<ul id="list">
</ul>
</div>
jQuery:
var textval = '';
$("#activityText").on("keyup", function() {
textval = $(this).val();
if (textval.length > 0) {
$("#list").html('<li>' + textval + '</li>');
} else {
$("#list").empty();
}
});
I have links on a page that I wanted to add an ID Anchor too. This code I have works fine:
window.onload = function() {
$('#main > div > ul > li > a').attr('href',function(i,str) {
return str + '#myAnchor';
});
};
But sometimes because of the way the page is set up tracking gets added to the links so what is happening at the moment is I get http://www.myurl.com/#someannoyingtracking#myAnchor which doesn't anchor. How can I insert the anchor in between the URL or always after the ".com/" Like this: http://www.myurl.com/#myAnchor#someannoyingtracking
This will insert an anchor before an annoying tracking anchor or at the end of the URL:
$('#main > div > ul > li > a').attr('href', function(i,str) {
return str.replace(/(\#.+)|($)/, '#myAnchor$1');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div>
<ul>
<li>Has anchor
<li>No anchor
</ul>
</div>
</div>
Piggybacking on Rick Hitchcock's answer, but regex-free:
$('#main > div > ul > li > a').each(function(index, elem) {
elem.hash = '#myAnchor' + elem.hash;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div>
<ul>
<li>Has anchor
<li>No anchor
</ul>
</div>
</div>
You can use replace for that:
window.onload = function() {
$('#main > div > ul > li > a').attr('href',function(i, str) {
if (str.indexOf('#') > -1) {
return str.replace('#', '#myAnchor');
} else {
return str + '#myAnchor';
}
});
};
How can I activate a menu tab after refreshing?
Here are my code
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<style>
.menu{width: 600px; height: 25; font-size: 18px;}
.menu li{list-style: none; float: left; margin-right: 4px; padding: 5px;}
.menu li:hover, .menu li.active {
background-color: #f90;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href='#'>One</a></li>
<li><a href='#'>Two</a></li>
<li><a href='#'>Three</a></li>
<li><a href='#'>Four</a></li>
</ul>
<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>
Can anyone tell me How to resolve this issue ?
Just like #Johan said, store your last active tab in a localStorage or cookie. Since there is no noticeable difference in performance between the two. I suggest you use localStorage because it's much easier to use. Like this:
function make_button_active(tab) {
//Get item siblings
var siblings = tab.siblings();
//Remove active class on all buttons
siblings.each(function(){
$(this).removeClass('active');
})
//Add the clicked button class
tab.addClass('active');
}
//Attach events to menu
$(document).ready(function(){
if(localStorage){
var ind = localStorage['tab']
make_button_active($('.menu li').eq(ind));
}
$(".menu li").click(function () {
if(localStorage){
localStorage['tab'] = $(this).index();
}
make_button_active($(this));
});
});
Check out this fiddle.