Select an element if ID partially matches - javascript

I have the following HTML:
<header>
<nav>
<ul>
<li id="menu-item-1">Lien 1</li>
<li id="menu-item-2">Lien 2</li>
<li id="menu-item-3">Lien 3</li>
</ul>
</nav>
</header>
<article id="content">
<div id="post-1" class="page">
<p>content post 1</p>
</div>
<div id="post-2" class="page">
<p>content post 2</p>
</div>
<div id="post-3" class="page">
<p>content post 3</p>
</div>
</article>
The idea is the following: if the number after menu-item- matches the number after post- then do something.
How do I do that?
The final goal is to display each div when i click on the corresponding menu link
menu-item-1 -> display post-1
menu-item-2 -> display post-2
menu-item-3 -> display post-3
Thanks !

$('nav').on('click', 'li', function(e) {
$('#post-' + this.id.replace('menu-item-', '')).show().siblings().hide();
});
Demo: http://jsfiddle.net/fKgdL/1

$('nav li').click(function() {
// Optional: hide other posts
$('.page').hide();
// Show the correct post
var id = this.id.replace('menu-item-', '');
$('#post-' + id).show();
});

You can do something like this:
$('a').click(function(){
$id = $(this).closest('li').prop('id'); // Get the id
$("#post-"+id.split("-")[2]).show(); // show the post
});

$('nav li').click(function() {
var id = this.value.split('-')[1];
var ele = $('#post-' + id);
ele.show();
$('.page').not(ele).hide();
});

$('li').click(function(){
var pID= $(this).attr('id').split('-')[2];
$('#content').find('div').each(function(){
if(pID==$(this).attr('id').split('-')[1]){
//DO SOMETHING HERE...
}
});
});

Related

How to open a bootstrap tabs using a link?

I have following bootstrap tabs code which is working when I click on the tab but I want to open the tab when I click on a link which I have created using ul > li > a
but unfortunately it's not working. how can i do this?
html code:
<ul>
<li>tab1</li>
<li>tab2</li>
</ul>
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>I'm in Section 2.</p>
</div>
</div>
</div>
</div>
Js Code:
<script>
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
</script>
Give your <ul> a class name, like alt-nav-tabs, and then copy the existing navigation JS code. It would look something like this:
HTML:
<!-- Add class to your <ul> element -->
<ul class="alt-nav-tabs">
<li>tab1</li>
<li>tab2</li>
</ul>
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>I'm in Section 2.</p>
</div>
</div>
</div>
</div>
JS:
<script>
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
// Copied (modify class selector to match your <ul> class): Change hash for page-reload
$('.alt-nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
</script>
Persistent tab visibility:
Based on the following comment, you have a tab that is showing no matter which tab is active...
one my give link I see that on a random tab a class called tab-visible
is added automatically.
To resolve this, you can use the following code to remove this class after the HTML loads:
<script>
$(document).ready(function() {
$('#tab-bem-estar-e-ambiente').removeClass('tab-visible');
});
</script>
Place this script in the <head> section, and you should be good to go!
Alternatively...
I noticed you tried to override the original tab-visible behavior. As it is now, the tab with the tab-visible class will never be visible, even when that tab is clicked on and active. If you never intend to use the tab-visible class on your tabs, you could just remove the style from the original CSS document here:
http://futura-dev.totalcommit.com/wp-content/themes/futura-child/style.css?ver=4.9.8
Find that CSS file in your hosted files, search for .tab-visible, and simply remove the class.

How to use js/css to make tab content viewable

I am working on tab
There are 5 tabs
About Us
Our Work
Our Team
News & Events
Contact us
and inside each of them there are content and links, images.
What i am trying to achieve here whenever i click the link inside the tab Our Team content,
It should open the Contact us Tab content.
Here is the code i am using currently, It has some custom js and jquery 2.2.0 used.
Please check the code, i haven't put css here.
The live link of this example is Live Demo
Please help me
// TABS
var tabs = $('.container_tabs');
$('.tabs-content > div', tabs).each(function (i) {
if (i != 0) $(this).hide(0);
});
tabs.on('click', '.tabs a', function (e) {
e.preventDefault();
var tabId = $(this).attr('href');
$('.tabs a', tabs).removeClass();
$(this).addClass('active');
$('.tabs-content > div', tabs).hide(0);
$(tabId).show();
});
// var tabs1 = $('.container_tabs1');
// $('.tabs-content > div', tabs1).each(function (i) {
// if (i != 0) $(this).hide(0);
// });
// tabs1.on('click', '.tabs a', function (e) {
//
// e.preventDefault();
//
// var tabId = $(this).attr('href');
//
//
// $('.tabs a', tabs1).removeClass();
// $(this).addClass('active');
//
// $('.tabs-content > div', tabs1).hide(0);
// $(tabId).show();
//
// });
(function ($) {
jQuery.fn.lightTabs = function (options) {
var createTabs = function () {
tabs = this;
i = 0;
showPage = function (tabs, i) {
$(tabs).children("div").children("div").hide();
$(tabs).children("div").children("div").eq(i).show();
$(tabs).children("ul").children("li").removeClass("active");
$(tabs).children("ul").children("li").eq(i).addClass("active");
};
showPage(tabs, 0);
$(tabs).children("ul").children("li").each(function (index, element) {
$(element).attr("data-page", i);
i++;
});
$(tabs).children("ul").children("li").click(function () {
showPage($(this).parent().parent(), parseInt($(this).attr("data-page")));
});
};
return this.each(createTabs);
};
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs cw-wrapper">
<ul class="cw-30">
<li class="" data-page="0">About Us</li>
<li data-page="1">Our Work</li>
<li data-page="2">Our Team</li>
<li data-page="3">Our Partners</li>
<li data-page="4" class="active">Work With Us</li>
<li data-page="5">Contact us</li>
</ul>
<div class="cw-70">
<div class="content" style="display: none;">
Content 1
</div>
<div class="content" style="display: none;">
Content 2
</div>
<div class="content" style="display: none;">
Content 3
</div>
<div class="content" style="display: none;">
Content 4
</div>
<div class="content" style="display: none;">
<h3>Contact us Content</h3>
</div>
</div>
</div>
If I understand you correctly, you want to be able to switch tabs by links that are inside your tab contents too. In that case you should create a function for switching tabs, instead of a click event in you menu. here is an example:
edit #1:
I removed all onclicks and bind switchTab function to all elements that have switch-tab class.
edit #2:
As requested, you can pass initial tab number from url ?tab=x codepen
// set tab from url
// sample url: http://mywebsite.com/my-route?tab=2
$(document).ready(function() {
var url = new URL(window.location.href);
var tabNumber = url.searchParams.get('tab');
if (tabNumber)
switchTab(tabNumber);
});
// change tab by clicking an element with "switch-tab" class
$('.switch-tab').on('click', function(e) {
var tabNumber = e.target.getAttribute('data-tab');
switchTab(tabNumber);
});
// change tab by passing tab number
function switchTab(tabNumber) {
$('#tabs li').removeClass('active');
$('#tabs li[data-tab=' + tabNumber + ']').addClass('active');
$('.content').css('display', 'none');
$('.content[data-content=' + tabNumber + ']').css('display', 'block');
}
<style>
#tabs li.active {
font-weight: bold;
}
.content {
display: none;
}
.content.visible {
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs cw-wrapper">
<ul class="cw-30" id="tabs">
<li data-tab="0" class="switch-tab">About Us</li>
<li data-tab="1" class="switch-tab">Our Work</li>
<li data-tab="2" class="switch-tab">Our Team</li>
<li data-tab="3" class="switch-tab">Our Partners</li>
<li data-tab="4" class="switch-tab active">Work With Us</li>
<li data-tab="5" class="switch-tab">Contact us</li>
</ul>
<div class="cw-70">
<div class="content" data-content="1">
<p>Content 1</p>
</div>
<div class="content" data-content="2">
<p>Content 2</p>
</div>
<div class="content" data-content="3">
<p>Content 3</p>
</div>
<div class="content visible" data-content="4">
<p>Content 4</p>
go to contact us
</div>
<div class="content" data-content="5">
<h3>Contact us Content</h3>
</div>
</div>
</div>

Jquery how to get ID and Title

Hello I have a UL and LI it working with function click but if get the title it not work.
Exemple:
// it work but not get title
$("#list li").on('click', function() {
var get_id = $(this).attr('id');
var get_title = ///??? how to get title h2 selector
//alert(get_id);
console.log($(this).text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js"></script>
<ul id="list">
<li id="myID">
<h2>Title</h2> First One </li>
<li id="myID2">
<h2>Title 2</h2> Two </li>
<li id="myID4">
<h3>Title 3</h3> Tree </li>
</ul>
You need to select the h2 element then get the text using text() like :
var get_title = $(this).find('h2').text();
As #ParthShah suggested you could use a global class like title_content on your title elements, so you could target it easily using class selector :
var get_title = $(this).find('.title_content').text();
$("#list li").on('click', function() {
var get_id = $(this).attr('id');
var get_title = $(this).find('.title_content').text();
console.log(get_id + ' - ' + get_title);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
<li id="myID"><h2 class="title_content">Title</h2> First One </li>
<li id="myID2"><h2 class="title_content">Title 2</h2> Two </li>
<li id="myID4"><h3 class="title_content">Title 3</h3> Tree </li>
</ul>
Use :header. No need to worry for any h1,h2,h3... tag.
$("#list li").on('click', function() {
var get_id = $(this).attr('id');
var get_title = $(this).find(":header").text();
console.log(get_title);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
<li id="myID">
<h2>Title</h2> First One </li>
<li id="myID2">
<h2>Title 2</h2> Two </li>
<li id="myID4">
<h3>Title 3</h3> Tree </li>
</ul>
</div>
use jQuery's find to query within your element.
var get_title = $(this).find("h2,h3").text() //add h4,h5 etc if you need to find those too.
https://jsfiddle.net/povu503s/
$(this).children().html();
Will take the first child and grab the HTML inside
The title is a children of your targeted li. Use the .children() function to target that heading.
Hope this helps :>
// it work but not get title
$("#list li").on('click',function(){
var get_id = $(this).attr('id');
var get_title = $(this).children().text();
alert(get_title)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list" >
<li id="myID" > <h2>Title</h2> First One </li>
<li id="myID2" > <h2>Title 2</h2> Two </li>
<li id="myID4" > <h3>Title 3</h3> Tree </li>
</ul>
give class like "title_content" to your h2 and h3 tag and then fetch title by class name.
$("#list li").on('click', function() {
var get_id = $(this).attr('id');
var get_title = $(".title_content", this).text();
console.log(get_id + ' - ' + get_title);
});
Please Refer below Fiddle..
Fiddle
You can use any of below
1. var get_title = $(this).find(':header').text();
2. var get_title = $(this).children().text();

Dropdown list actions using jquery

I have the following Dropdown List which is not the traditional SELECT and OPTION dropdown list. Using JQUERY, I am wanting to know if there is a way to perform an action when a given option is chosen. EX - When you click the dropdown and choose BIRDS, it will hide some DIV elsewhere on the page. Thank You
<section class="main">
<div class="wrapper">
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>View By Category</span>
<ul class="dropdown">
<li><a>Dogs</a></li>
<li><a>Cats</a></li>
<li><a>Birds</a></li>
</ul>
</div>
</div>
</section>
https://jsfiddle.net/o8h4gvgd/5/
use something like this. I hope this will help you.
$(document).ready(function(){
$('.dropdown .bird').click(function(){
$('#section_1').toggle();
$('#section_1').hide();
});
});
$('div#dd ul.dropdown li a').on('click', function() {var clsName = $(this).parent().attr('name'); $("."+clsName).hide()});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<section class="main">
<div class="wrapper">
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>View By Category</span>
<ul class="dropdown">
<li name='dogs'>Dogs</li>
<li name='cats'>Cats</li>
<li name='birds'>Birds</li>
</ul>
</div>
</div>
</section>
<div class='dogs'>Div with dogs info</div>
<div class='cats'>Div with cats info</div>
<div class='birds'>Div with birds info</div>
give a class to entries like;
<li><a class="item">Dogs</a></li>
<li><a class="item">Cats</a></li>
<li><a class="item">Birds</a></li>
then, use a click event like;
$(".item").click(function(){
item = $(this).text();
alert(item);
});
$('#dd ul.dropdown a').click(function() {
var _this = $(this);
var index = $('#dd ul.dropdown a').index(_this);
alert(index);
if (index === 2) {
alert(_this.text());
// ..do anything you want
}
$(document).ready(function () {
//Your function on what needs to be done on click
var liClicked = function(obj){
alert("You Clicked : "+$(obj).html());
}
//trigger the onclick based on selected -- in this case '#dd ul.dropdown li a'
$(document).on("click","#dd ul.dropdown li a", function(){
//call the above written function
liClicked(this);
});
});

How to stop URL with hash from jumping to anchor?

I've tried almost everyone's answer to similar problems and the answers haven't help me. So i'll post my codes and then explain a little more details of what is my problem.
Link to see codes in and editor.
http://jsbin.com/nudavoseso/edit?html,js,output
Code inside .html body.
<div class="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
<div id="content1" class="content">
<h1>One</h1>
<p>Content goes here</p>
</div>
<div id="content2" class="content">
<h1>Two</h1>
<p>Content goes here</p>
</div>
<div id="content3" class="content">
<h1>Three</h1>
<p>Content goes here</p>
</div>
and code inside .js file.
function tabs() {
$(".content").hide();
if (location.hash !== "") {
$(location.hash).fadeIn();
$('.tabs ul li:has(a[href="' + location.hash + '"])').addClass("active");
} else {
$(".tabs ul li").first().addClass("active");
$('.tabs').next().css("display", "block");
}
}
tabs();
$(".tabs ul li").click(function() {
$(".tabs ul li").removeAttr("class");
$(this).addClass("active");
$(".content").hide();
var activeTab = $(this).find("a").attr("href");
location.hash = activeTab;
$(activeTab).fadeIn();
return false;
});
Everything works great if you go check out the example url below.
http://output.jsbin.com/nudavoseso
The problem
If you go to the same url above with the hashtag #content1 at the end it jumps to anchor(#content1), I do not want the page to be jumping to anchor. I want the page to always start at the top. This only happens when it's a direct link to the url.
http://output.jsbin.com/nudavoseso#content1
If you're willing to take a slight hit to your user's experience, you can detect when a hash exists and simply reload the page without the hash:
if (location.hash) {
window.location = location.href.replace(location.hash, '');
}
THE FIX
html
<div class="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
<div class="content content1">
<p>1. Content goes here</p>
</div>
<div class="content content2">
<p>2. Content goes here</p>
</div>
<div class="content content3">
<p>3. Content goes here</p>
</div>
js
function tabs(){
$(".content").hide();
if (location.hash !== "") {
$('.tabs ul li:has(a[href="' + location.hash + '"])').addClass("active");
var hash = window.location.hash.substr(1);
var contentClass = "." + hash;
$(contentClass).fadeIn();
} else {
$(".tabs ul li").first().addClass("active");
$('.tabs').next().css("display", "block");
}
}
tabs();
$(".tabs ul li").click(function(e) {
$(".tabs ul li").removeAttr("class");
$(this).addClass("active");
$(".content").hide();
var contentClass = "." + $(this).find("a").attr("href").substr(1);
$(contentClass).fadeIn();
window.location.hash = $(this).find("a").attr("href");
e.preventDefault();
return false;
});
URL without any hash.
http://output.jsbin.com/tojeja
URL with hashtag that does not jumping to anchor.
http://output.jsbin.com/tojeja#content1

Categories