Solved

Adding a class to a tab panel when the tab is selected

Posted on 2014-10-22
3
135 Views
Last Modified: 2015-01-02
How would i add a script that would add .z-index to the tab-panel that is active?

This is what i have:

<ul class="nav nav-pills pills-round" role="tablist" id="myTab">
<li class="active col-sm-4">Amount<a href="#tab1" role="tab" data-toggle="pill"><span>1</span></a></li>
<li class="col-sm-4"><hr>Name<a href="#tab2" role="tab" data-toggle="pill"><span>2</span></a></li>
<li class="col-sm-4"><hr>Payment<a href="#tab3" role="tab" data-toggle="pill"><span>3</span></a></li>
</ul>

When you select a tab, it opens a panel:

<div class="tab-content" id="myTabContent">
   <div class="tab-pane" id="tab1"></div>
    <div class="tab-pane" id="tab2"></div>
    <div class="tab-pane" id="tab2"></div>
</div>

I tried this script but it doesn't work. Any ideas?

$('.pills-round>li>a').click(function(){
$('.z-index').removeclass('z-index');
$('.active').addclass('z-index');
});
0
Comment
Question by:Miriam Fisher
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 27

Accepted Solution

by:
Sammy earned 500 total points
ID: 40397387
z-index is a reserved word (it is a css property name) you should change that to something else.
0

Featured Post

Quiz: What Do These Organizations Have In Common?

Hint: Their teams ended up taking quizzes, too.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question