We Keep Coding

How to open link on specific tab

I have a slider on a page, I need the link in that slider to send it to another page with a specific tab open.
I tried to use # 1 at the end of the link however it does not work.
I think i have to use some js to do this, have to put active class on tab and remove the active from first tab. And they will have several sliders that will send to that same page with another open tab.
SLIDER
<div class="container-fluid">
<div class="row text-center my-3">
<div class="row mx-auto my-auto central_slider_prod">
<div id="recipeCarousel" class="carousel slide w-100 tamanho_carousel" data-ride="carousel">
<div class="carousel-inner w-100" role="listbox">
<div class="carousel-item active">
<img class="img-fluid" src="test1.jpg" /><span>Test 1</span>
</div>
<div class="carousel-item">
<img class="img-fluid" src="test2.jpg" /><span>Test 2</span>
</div>
</div>
</div>
</div>
</div>
</div>
TABS
<div id="exTab2" class="container alinha-tab">
<ul class="nav nav-tabs">
<li class="bt_prod_1">
<a id="bt_prod_2" class="active" href="#1" data-toggle="tab">
Test 1
</a>
</li>
<li class="bt_prod_1">
<a id="bt_prod_3" href="#2" data-toggle="tab">
Test 2
</a>
</li>
</ul>
<div class="tab-content">
<!-- TAB #1 -->
<div class="tab-pane active" id="1">
<div class="container-fluid">
<div class="row">
Test 1
</div>
</div>
</div>
<!-- TAB #2 -->
<div class="tab-pane" id="2">
<div class="container-fluid">
<div class="row">
Test 2
</div>
</div>
</div>
</div>
</div>
</div>

To open a new tab you add target="_blank" to your anchor link
<img class="img-fluid" src="test2.jpg" /><span>Test 2</span>

Try this in your js if you use jquery:
$(window.location.hash).tab('show');

Bootstrap 3 active tab doesn't show when page loads

Question:
When I load my page, the active tab doesnt show anything. It only does when I go to a different tab and then back. When I reload the page, the 'active' tab is empty again.
So,
When I load the page, the 'home' tab is empty. If I go to 'prijslijst' (prijslijst is filled correctly) and then back to 'home', 'home' is filled. If I were to reload the page, 'home' is empty yet again.
HTML:
<section class="no-padding">
<div class="row">
<div class="wrapper-selector">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Woningselector</li>
<li role="presentation">Prijslijst</li>
</ul>
<div class="tab-content">
<!--Selector Tab-->
<div role="tabpanel" class="tab-pane fade active" id="home">
<div class="selector" style="position: relative;">
<div id="mapwrapper">
<img id="Woningselector" alt="Woningselector" usemap="#Woningselector"/>
</div>
<map name="Woningselector" id="mapWoningselector"></map>
</div>
</div>
<!--Prijslijst Tab-->
<div role="tabpanel" class="tab-pane fade" id="prijslijst">
{include file="componenten/prijslijst.tpl"}
</div>
</div>
</div>
</div>
</section>

You can check the the HTML using browser console & see what happen when you back to first tab (click on first tab).
You need to use active in instead of active.
<section class="no-padding">
<div class="row">
<div class="wrapper-selector">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
Woningselector
</li>
<li role="presentation">Prijslijst</li>
</ul>
<div class="tab-content">
<!--Selector Tab-->
<div role="tabpanel" class="tab-pane fade active in" id="home">
<div class="selector" style="position: relative;">
<div id="mapwrapper">
<img id="Woningselector" alt="Woningselector" usemap="#Woningselector"/>
</div>
<map name="Woningselector" id="mapWoningselector"></map>
</div>
</div>
<!--Prijslijst Tab-->
<div role="tabpanel" class="tab-pane fade" id="prijslijst">
{include file="componenten/prijslijst.tpl"}
</div>
</div>
</div>
</div>
</section>

How to show menu items in a pop-up in bootstrap modal dialog box according to the psd?

I'm using Bootstrap v3.3.5 in my website.
Now I've HTML code of modal dialog box as follows :
<div style="display: block; padding-right: 13px;" id="myModal-event" class="modal fade in" role="dialog">
<div role="document" style="width:600px;position:relative;margin:auto;margin-top:10px;">
<div class="modal-content" style="border:0;">
<div role="document" class="modal-dialog event-planner">
<div class="modal-content">
<div class="modal-header">
<h4 id="myModalLabel" class="modal-title">Event Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-6 col-md-6 col-sm-12">
<div class="event-title">
NewDemoEvent5
<input name="hid_event_id" id="hid_event_id" value="501" type="hidden">
</div>
<ul>
<li><img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/time.png" alt=""> 12:00 pm</li>
<li><img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/calender.png" alt=""> Thursday, January 7</li>
<li>
<img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/location.png" alt="">
Home Nightclub, Sydney, New South Wales, Australia
</li>
<li><img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/group_event.png" alt="">Group: Boxing Day</li>
</ul>
</div>
<div class="col-sm-6 col-md-6 col-sm-12">
<div class="form-group" align="right">
<select name="user_event_responce" id="user_event_responce" class="form-control" style="width:150px;">
<option value="0">I am..</option>
<option value="1" selected="selected">Going</option>
<option value="2">Maybe</option>
<option value="3">Not Going</option>
</select>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="event-menu">
<ul class="nav nav-tabs" id="myTab">
<li class=""><a aria-expanded="false" href="#description" data-toggle="tab">Description</a></li>
<li>Feeds</li>
<li>Going</li>
<li>Maybe</li>
<li class="active"><a aria-expanded="true" href="#notgoing" data-toggle="tab">Not Going</a></li>
</ul>
</div>
</div>
<hr>
<div class="tab-content">
<div class="tab-pane" id="description">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
DemoEvent5 is added successfully.
</div>
</div>
</div>
<div class="tab-pane" id="feeds">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
Work In Progress
</div>
</div>
</div>
<div class="tab-pane" id="going">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="col-md-2 col-sm-2 col-xs-12 no-padding">
<div class="block"> <img src="http://app.campusknot.com/file/pic/user/1585_100_square.jpg" class="img-event" alt="">
<span class="author">Sushil Kadam</span>
<span class="degree"></span>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="maybe">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
</div>
</div>
</div>
<div class="tab-pane active" id="notgoing">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
On this modal dialog I want to show three black colored bold dots and upon clicking on those dots a vertical pop-up menu should open up consisting of menus Edit Event, Invite Members, Delete Event. Each of the menu items should be separated by a horizontal line. When user clicks somewhere else apart from the opened-up menu the menu pop-up should get close.
PFA the psd image for reference of what I need to do.
Three bold black-colored dots are actually got hidden behind the pop-up menu.
I want the exactly same functionality working.
Thanks.

try this HTML which uses bootstrap :
<div class="dropdown">
<p class="dropdown-toggle" data-toggle="dropdown">
<a class="glyphicon glyphicon-option-horizontal"></a></p>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

Bootstrap Togglable tabs. How can I show the .tab-pane content when I hover over the `.nav-tabs > li`, then hide the content when the mouse leaves?

I have togglable tabs using Twitter Bootstrap. My problem is that my .tab-content is hidden and I want to show it when the mouse pointer enters the .nav-tabs > li and hide it when the mouse pointer leaves the elements.
Here is my code:
<div role="tabpanel" class="tabpanel">
<div class="container">
<!-- company tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">
<a href="#sigma" aria-controls="sigma" role="tab" data-toggle="tab" class="boxopacity">
<span>TAb1</span>
</a>
</li>
<li role="presentation">
<a href="#alpek" aria-controls="alpek" role="tab" data-toggle="tab" class="boxopacity">
<span>TAb2</span>
</a>
</li>
<li role="presentation">
<a href="#nemak" aria-controls="nemak" role="tab" data-toggle="tab" class="boxopacity">
<span>TAb3</span>
</a>
</li>
</ul><!-- .end company tabs -->
<!-- company information -->
<div class="tab-content">
<!-- company sigma -->
<div role="tabpanel" class="tab-pane fade" id="sigma">
<div class="box largebox">
<div class="content">
<h5>Tab1</h5>
</div>
</div>
<div class="box mediumbox">
<div class="content">
<h6>Productos principales</h6>
<h6>Mercados</h6>
<ul>
<li>Alimentos</li>
</ul>
</div>
</div>
<div class="box mediumbox">
<div class="content">
<h6>Cifras relevantes</h6>
<ul class="relevant">
</ul>
</div>
</div>
<div class="box mediumbox">
</div>
</div>
<!-- company alpek -->
<div role="tabpanel" class="tab-pane fade" id="alpek">
<div class="box largebox">
<div class="content">
<h5>Tab2</h5>
</div>
</div>
<div class="box mediumbox">
<div class="content">
<h6>Productos principales</h6>
<h6>Mercados</h6>
</div>
</div>
<div class="box mediumbox">
<div class="content">
<h6>Cifras relevantes</h6>
<ul class="relevant">
<li>Plantas</li>
</ul>
</div>
</div>
<div class="box mediumbox">
</div>
</div>
<!-- company nemak -->
<div role="tabpanel" class="tab-pane fade" id="nemak">
<div class="box largebox">
<div class="content">
<h5>Tab3</h5>
</div>
</div>
<div class="box mediumbox">
<div class="content">
<h6>Productos principales</h6>
<h6>Mercados</h6>
<ul>
<li>Automortiz.</li>
</ul>
</div>
</div>
<div class="box mediumbox">
<div class="content">
<h6>Cifras relevantes</h6>
<ul class="relevant">
</ul>
</div>
</div>
<div class="box mediumbox">
</div>
</div>
</div><!-- .end company information -->
</div>
</div>
My Jquery:
<script>
$(document).ready(function (){
$('.nav-tabs > li > a').hover(function () {
$(this).tab('show');
}, function () {
});
});
</script>

You can do it with mouseenter & mouseleave like this fiddle I've just created:
http://jsfiddle.net/jep0n6p9/3/
jQuery
$( '.nav-tabs' ).mouseenter( handlerIn );
$( '.tab-content' ).mouseleave( handlerOut );
function handlerIn() {
$('.tab-content').show();
}
function handlerOut() {
$('.tab-content').hide();
}

Please use mouseleave event on nav-tab to hide content of tabs.
Please check this link : http://jsfiddle.net/yLq1df22/
Hope this might be helpful to you.

How can I make a Bootstrap .nav-list hide and show distinct div elements?

I just used a Bootstrap .nav-tabs which actually makes the tab function of showing/hidding content:
<div class="tabbable">
<ul class="nav nav-tabs">
<li>Perfiles</li>
<li>Mallas</li>
<li>Láminas</li>
<li>Corrugado</li>
<li>Cables</li>
<li>Tecnológico</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab-perfiles">
</div>
<div class="tab-pane" id="tab-mallas">
</div>
</div>
</div>
So clicking at any tab will make the div inside .tab-content being displayed and hiding the rest.
But what about using a .nav-list?
For example, I got:
<ul class="nav nav-list">
<li class="active">Home</li>
<li>Info</li>
<li>Applications</li>
<li>Profile</li>
<li>Team</li>
</ul>
I want it to be able to do the same, I tried using it within a .tabbable and adding a .tab-content below but got not results.
Actually I'd like the .nav-list and its contents to be inside a .tab-content:
<div class="tabbable">
<ul class="nav nav-tabs">
<li>Perfiles</li>
<li>Mallas</li>
<li>Láminas</li>
<li>Corrugado</li>
<li>Cables</li>
<li>Tecnológico</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab-perfiles">
<div class="row tab-categoria-producto">
<div class="col-sm-3">
<ul class="nav nav-list">
<li class="active">Home</li>
<li>Sasha</li>
<li>Applications</li>
<li>Profile</li>
<li>Akira</li>
</ul>
</div>
<div class="col-sm-2">
<div id="sasha">Hola Sasha</div>
</div>
<div class="col-sm-2">
<div id="akira">Hola Akira</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab-mallas">
</div>
<div class="tab-pane" id="tab-laminas">
</div>
<div class="tab-pane" id="tab-corrugado">
</div>
<div class="tab-pane" id="tab-cables">
</div>
<div class="tab-pane" id="tab-tecnologico">
</div>
<!-- Fin tab content -->
</div>
</div> <!-- Fin tabbable -->
I include this fiddle

This is possible without your own JS. You just need the correct structure and class names.
Here's your corrected markup:
<!-- Top Tabs -->
<ul class="nav nav-tabs">
<li class="active">Perfiles</li>
<li>Mallas</li>
<li>Láminas</li>
<li>Corrugado</li>
<li>Cables</li>
<li>Tecnológico</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-perfiles">
<div class="container-fluid">
<div class="row tab-categoria-producto">
<!-- Tab 1 navigation -->
<ul class="col-sm-3 nav nav-list">
<li class="active">Sasha</li>
<li>Akira</li>
</ul>
<!-- Tab 1 content -->
<div class="col-sm-9">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="sasha">Hola Sasha</div>
<div class="tab-pane" id="akira">Hola Akira</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab-mallas">Content 2</div>
<div class="tab-pane" id="tab-laminas">Content 3</div>
<div class="tab-pane" id="tab-corrugado">Content 4</div>
<div class="tab-pane" id="tab-cables">Content 5</div>
<div class="tab-pane" id="tab-tecnologico">Content 6</div>
<!-- Fin tab content -->
</div>
Demo
Here's another demo of this that's less busy (it has less tabs and is cleaner as it only uses the necessary classes, rather than the OP's additional ones), in case others want to see it).
Nice clean demo

Take a look at following example, a simple effort from my side. I hope it may work for you:
<div id="rootwizard">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Forth</li>
<li>Fifth</li>
<li>Sixth</li>
<li>Seventh</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab1">
1
</div>
<div class="tab-pane" id="tab2">
2
</div>
<div class="tab-pane" id="tab3">
3
</div>
<div class="tab-pane" id="tab4">
4
</div>
<div class="tab-pane" id="tab5">
5
</div>
<div class="tab-pane" id="tab6">
6
</div>
<div class="tab-pane" id="tab7">
7
</div>