SOLVED
Deep linking capabilities into a tab of a component in aem
1 Accepted Solution
Correct answer by
Hi
As mentioned by Kunal and Scott, we can achieve this by JavaScript or Jquery.
Option 1:-
Please find below the example for the same:
1. Menu 1 Tab selected.
Dynamic Tabs
Menu 1
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
2. Menu 3 Tab selected
Dynamic Tabs
Menu 3
Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Copy the following code in any test file and rename it to .html
//
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dynamic Tabs</h2>
<ul class="nav nav-tabs">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#menu1">Menu 1</a></li>
<li><a href="#menu2">Menu 2</a></li>
<li><a href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$('.nav-tabs li:eq(3) a').tab('show')
});
});
</script>
</body>
</html>
$('.nav-tabs li:eq(3) a').tab('show') in above code helps you select the tab that you would like to select by default.
change this 3 number to 2 to select menu 2.
Option 2:-
Create a OSGI Component that can dynamically change the default tab using some query parameters or HTTP header values.
Link:- http://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp
I hope this would help you.
Thanks and Regards
KautuK Sahni
Kautuk Sahni
Correct answer by
Hi
As mentioned by Kunal and Scott, we can achieve this by JavaScript or Jquery.
Option 1:-
Please find below the example for the same:
1. Menu 1 Tab selected.
Dynamic Tabs
Menu 1
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
2. Menu 3 Tab selected
Dynamic Tabs
Menu 3
Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Copy the following code in any test file and rename it to .html
//
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dynamic Tabs</h2>
<ul class="nav nav-tabs">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#menu1">Menu 1</a></li>
<li><a href="#menu2">Menu 2</a></li>
<li><a href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$('.nav-tabs li:eq(3) a').tab('show')
});
});
</script>
</body>
</html>
$('.nav-tabs li:eq(3) a').tab('show') in above code helps you select the tab that you would like to select by default.
change this 3 number to 2 to select menu 2.
Option 2:-
Create a OSGI Component that can dynamically change the default tab using some query parameters or HTTP header values.
Link:- http://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp
I hope this would help you.
Thanks and Regards
KautuK Sahni
Kautuk Sahni
Related Conversations
