Pretty simple question please : How can I add a button at the bottom called "Next" to switch to the next tab without having to get to the top of the page and click on the next tab ?
In fact, I'm copying the tab's code existing in the top of my page but it's not working.
<a id="aba_2" href="#aba_2">Next</a>
This is the existing HTML code that you can also find here https://codepen.io/DiogoAlvaro/pen/wWzNEm :
<ul id="abas" class="teste">
<li class="selecionada"><a id="aba_1" href="#aba_1">Aba 1</a></li>
<li><a id="aba_2" href="#aba_2">Aba 2</a></li>
<li><a id="aba_3" href="#aba_3">Aba 3</a></li>
</ul>
<div id="conteudos">
<div id="conteudo_1" class="conteudo visivel">
<p>Conteúdo da Aba 1</p>
</div>
<div id="conteudo_2" class="conteudo">
<p>Conteúdo da Aba 2</p>
</div>
</div>
The javascript code is :
var abas = document.getElementById("abas");
var conteudos = document.getElementById("conteudos");
function limparSelecao(){
abas.getElementsByClassName("selecionada")[0].classList.remove("selecionada");
conteudos.getElementsByClassName("visivel")[0].classList.remove("visivel");
}
abas.addEventListener("click", function(event){
var abaClicada = event.target.id;
var itemSelecionado = abaClicada.substring(abaClicada.lastIndexOf("_"));
limparSelecao();
event.target.parentElement.classList.add("selecionada");
conteudos.querySelector("#conteudo"+ itemSelecionado).classList.add("visivel");
});
The problem I'm noticing is the switching functionality between tabs is working only one time. It means if I copy the same tabs' code another time it will not work.
Can you help me with this issue please ?
Thanks in advance.
As you can see in your javascript, when you click on a tab things will be done in the background in order to show you its content.
When a tab is clicked the class selectionada is added to your tab as well the class visivel is added to your content in order to show it.
So that sad if you want to use a button you will need then some additional javascript which has to add the class selectionada to the tab and the class visivel to the content you want to display.
Additionally the button has to know which the current open (selectionada) tab is in order to open the next one. Also if you use a Next button it seems to me logical that you will also need a Previous button.
I don't know your programming skills but this process involves some logic in order to be done.
If you are confident with javascript and jquery you can do this with some little effort.
Anyway you know now why just using a button as you ar doing, will not work.
Related
I've spent the past several hours trying to work out a hover effect for 2 separate links on a site I'm working on. The links aren't even remotely related in the HTML, so I'm unable to use CSS (as far as I can see) to achieve the effect. It's nothing more than a simple hover effect to change the color of two separate links on hove, regardless of which one the user hovers over. There are no images at this point, only text - I'm hoping it stays that way (I'm looking at you, graphic designer wife).
The html involves a bootstrap navbar & a link on the home page of a WordPress site, so the architecture is something like this:
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a class="abt" href="#">About</a></li>
<li><a class="prc" href="#">Work</a></li>
<li><a class="exp" href="#">Testimonials</a></li>
<li><a class="ofc" href="#">Locations</a></li>
<li><a class="con" href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<section id="content" role="main">
<article id="post-10" class="post-10 page type-page status-publish hentry">
<header class="header">
<h1 class="entry-title">Home</h1> <a class="post-edit-link" href="#post.php?post=10&action=edit">Edit This</a></header>
<section class="entry-content">
<div class="links">
<li><a class="abt" href="#/about/"><span class="pg abt1">
<p>About</p>
<p></span></a></li>
I'd like to focus on the "About" sections for this - I'm pretty sure that I need either jQuery or JS to accomplish what I'm after but I'm a rank beginner in both!
Alright, so you're right. You need jQuery. First of all, what you should do is give the two link tags the same class, let's say foo. Give both link tags the class foo. Then, use jQuery to target them both.
Now, id you want it to change the color permanently on hover, use THIS:
$('.foo').hover(function(){
$('.foo').css('color', 'red');
});
Feel free to change red to whatever color you like. Now, if you want the color to change only while being hovered over, use this:
$('.foo').mouseenter(function(){
$('.foo').css('color', 'red');
});
$('.foo').mouseleave(function(){
$('.foo').css('color', 'black');
});
in the second chunk, change black to whatever the original color is. If you are unfamiliar with how to use JQuery, add the following tag into your code below the CSS stylesheet (if applicable)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
This makes the browser read the jQuery. If you don't have this, the browser can't read the jQuery.
Then, copy and paste either one of the two bits of jQuery into a file, save it as a .js file, and then attach it via <script> tag after the tag listed above. Alternatively, put the jQuery between two script tags as such:
<script type='text/javascript'>
//one of the two blocks of JQuery here
</script>
Put that in your code After the tag that allows you to use jQuery.
EDIT: I received a request for code to make them different colors. The code would look like this:
First of all, you can keep or remove the class. Then assign them separate IDs , say id_1 and id_2. Then, using the first method:
$('#id_1').hover(function(){
$(this).css('color', 'red');
});
$('#id_2').hover(function(){
$(this).css('color', 'red');
});
This would change the color permanent when hovered on. Using the second method to change the color while being hovered on:
$('#id_1').mouseenter(function(){
$(this).css('color', 'red');
});
$('#id_1').mouseleave(function(){
$(this).css('color', 'black');
});
then do the same thing, but switch id_1 for id_2 and change the colors to whatever. The first color is the color being changed to, and the second one the color being set back to the original.
As a preface, I am using PhoneGap. When I click on a Category Title, I have taken that title and set it in sessionStorage. Now, I want to set the "back" button of a new PhoneGap page (which displays some information contained in that category) to that Category Title. The HTML code is shown below. To be specific, I want to change the text of the "a" element within the "header" element.
I guess a part of my question is, does the fact that I am using PhoneGap change how I can access the anchor tag? I've been trying to set the back button text right after the Category has been selected/clicked on. I have tried multiple things like:
$("adviceBodyNavbarHeader a").text(sessionStorage.getItem("catTitle"));
but I can't quite get it working, and it is getting quite frustrating =/
<div data-role="view" id="adviceBody" data-title="Advice Body" data-show="GetAdviceBody" data-transition="slide">
<header data-role="header" id="adviceBodyNavbarHeader">
<div class="navHeader">
<a class="nav-button" data-view="adviceTitles" data-align="left">Back</a>
<span id="adviceTitle" class="navTitle"></span>
</div>
</header>
<ul id="advice-body" data-role="listview">
</ul>
</div>
Your selector is wrong. You try to select a html element called adviceBodyNavbarHeader.
What you want to do is this: $('#adviceBodyNavbarHeader').text(sessionStorage.getItem("catTitle"));
Hope it helps.
Edited my post due to late brain inactivity.
Am creating a web application having 4 tabs... Each tab contains a sidemenu (jQuery) and the remaining part is divided into 2, topdiv and bottom div (table with 2 colums.. col1=sidemenu, col2=topdiv+bottomdiv) ... I use
$("#topdiv").load("contents/abc.html #xyz")
To load contents of div xyz to topdiv, which(xyz) is in another page abc.html when I click a particular link in the sidemenu... But sometimes when #xyz will again have 4 or 5 tabs ,those tabs are not available as tabs in #topdiv... instead they appear as just list.. am using $("#___").tabs() for creating tabs...can anyone help me? I cannot add images here since am not having enough reputations in stack overflow. if some one provides ur email address I can attach images of my current status of page and those of which I need to design... here is part of ma code.
============================================================================
home.jsp
======================================================================
<div id="mainmenu" class="tabs">
<ul>
<li >tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div id="tab1">
</div>
<div id="tab2">
<div id="topdiv">
</div>
<div id="bottomdiv">
</div>
</div>
<div id="tab3">
</div>
</div>
===========================================================================
abc.html
============================================================================
<div id="xyz">
<div id="innertabs" class="tabs">
<ul>
<li >inner tab1</li>
<li>inner tab2</li>
<li>inner tab3</li>
</ul>
<div id="innertab1">inner tab 1 contents</div>
<div id="innertab2">inner tab 2 contents</div>
<div id="innertab3">inner tab 3 contents</div>
</div>
</div>
===========================================================================================
main.js//javascript---jquery-ajax connected
===========================================================================================
$(".tabs").tabs();
$("#topdiv").load("contents/abc.html #xyz");
enter code here
========================================================================================
pls note that div '#mainmenu' is appearing in tab format... but "#innertabs" also having class "tabs" is not appearing in tab format.. instead they appear in #topdiv as lists and contents below it
===========================================================================================
I assume you using jquery ui tabs.
If so after loading other page content, apply again tabs function on main div
$( "#tabs" ).tabs();
Actually you should apply .tabs() after ajax content is loaded. Not before that. I am not sure if applying .tabs() twice may damage it.
Update:
Here is fiddle for you Example . then your code will be
$("#mainmenu").tabs();
$("#topdiv").load("contents/abc.html #xyz");
$("#innertabs").tabs();
atlast after a lot of researchs and experiments, i hav found a solution to this... actually i hav to use unique div ids for tabs instead of class = "tabs"... then the tab statement will change to $("#innertabs").tabs(); but to make sure that $().tabs() is invoked only after loading the contents, put that statement in a callback function of $().load()... so my actual problem was $("#innertabs").tabs() is invoked even before it is loaded into #topdiv from the page abc.html..hence they can be displayed only as lists as there is no div with id=innertabs at the time of $().tabs() is invoked. . now it is avoided and the working code is
$("topdiv").load("contents/abc.html #xyz",function(){$("#innertabs").tabs();});
so only after loading the div into topdiv, corresponding tabs are generated and thus it will be displayed as tabs itself
so i think its good to use a callback function all the time when u need this stuff to be done without any errors...
also if anyone came to know about the disadvantages of this method pls do post here.. it wll be helpfull for me as a fresher
looking forward to a career in software development...
I'm using Bootstrap 3 to create a simple site.
I've created on about.html some Tabs with different content.
<ul class="nav nav-tabs" id="TabSomos">
<li class="active">Quienes Somos</li>
<li>Nosotros</li>
<li>Calidad</li>
</ul>
<article class="tab-content">
<div class="tab-pane active" id="somos">...</div>
<div class="tab-pane" id="nosotros">...</div>
<div class="tab-pane" id="calidad">...</div>
</article>
From index.html I want to create links that open different tabs. I created an ID per tab. However, since it's "hidden" it doesn't work properly.
Modelos de Calidad
I've been reading this solution: link to a specific tab by jquery however I do not fully understand where(and why) to put the scripts. Not sure if that's just within the same html document or between different ones, that it's the thing I need.
Any advice? (As you may see I'm not really that proficient with JS/jQuery). Thank you!
I cannot understand your question completely but here is what i can help you with what i understand.
You want to open a particular tab using the ID in about page.
Try using this code at the end of your about.html page,
$(document).ready(function() {
var hash = location.hash;
$(hash).tab('show');
});
Thank you vigneshmoha,
It seems that someone asked the "same" question as well, and we were heading in the right direction regarding the hash.
Bootstrap tabs opening tabs on another page
I have a list of <li> items being generated from a CMS/DB. Each <li> has a <div> in it which contains a link to a lightbox (a hidden <div>). The link targets the id of the hidden <div> (#inline-content-print) so the javascript plugin triggers and pulls up the lightbox.
The problem I'm running into is that all of the <li>s on the page generate with the same hidden div id (I can change this to classes). So no matter which <li> href is clicked, it always pulls up the lightbox for the first <li> on the page (the first instance of the id). I need a way for the href to say "open #inline-content-print" from THIS div (the one the link being clicked lives in)".
<li>
<div class="store-buttons-bg hide-print-buttons-{tag_Hide-Print-Buttons}">
PRINT
<div style="display: none;" id="inline-content-print">
CONTENT OF LIGHTBOX
</div>
<!-- end inline-content-print -->
</div>
</li>
Any advice would be greatly appreciated.
What server side language are you using? Is it producing these list items in a loop? Is there an index on that loop? If so, this would work for you.
[Server language version of a for loop with an index variable named "i"]
<li>
<div class="store-buttons-bg hide-print-buttons-{tag_Hide-Print-Buttons}">
PRINT
<div style="display: none;" id="inline-content-print_[server language output of "i"]">
CONTENT OF LIGHTBOX
</div>
<!-- end inline-content-print -->
</div>
</li>
[server language version of an end to the for loop]
Assuming you want to do this with jQuery/Javascript, you could use something like this:
$(document).ready(function()
{
$('li a.store-button').click(function(e)
{
var lightboxElement = $(e.currentTarget).find('div');
lightboxElement.show(); // or whatever function you need to display
return false;
});
});
Which is a little script that:
Waits for the page to load.
Finds your list elements (by li object type and the class on the links)
Intercepts click events.
Finds the div element nested in the link that was clicked.
Displays (or runs another function) on the target lightbox element.