CODEWITHSUNDEEP
javascriptjqueryhtmltabs
user3128861
user3128861

Reputation: 121

On click highlight the tab and display the content

currently I'm trying like if I click on the tab it will change color instead of the standard color I set.How do I go about doing it because I'm using the toggle() function.

Currently I'm stuck at here. 

$("li").click(function(){
$(this).css('background-color',"#6F0")
    })

http://jsfiddle.net/eMLTB/112

Upvotes: 0

Views: 1999

Answers (4)

Saurabh
Saurabh

Reputation: 148

Check the line of script where i placed a comment, I think after adding this solves your problem. 

<div id="container">
<nav id="tabs">
<ul id ="ta" class="nav">
      <li id="a"><a href="#tabs-1">0</a></li>
      <li id="b"><a href="#tabs-2">5</a></li>
      <li id="c"><a href="#tabs-3">10</a></li>
    </ul>
    <div class="tabContent" id="tabs-1" >
      <h2>Testing1</h2>
    </div>

    <div class="tabContent" id="tabs-2">
      <h2>Testing2</h2>
    </div>

    <div class="tabContent" id="tabs-3">
      <h2>Testing3</h2>
    </div>
</nav>

And in your Script

var i;

$("li").each(
    function(){
$(this).click(
    function(){
    i = $(this).find("a").attr("href");
        $(i).toggle();
    }
);
    }
);

$("li").click(function(){
    $('li').css('background-color',"#fff");//------>I set it #fff , you Can Put here your standard color code
       $(this).css('background-color',"#6F0")
        })

Upvotes: 1

BugiLesPaul
BugiLesPaul

Reputation: 88

I would suggest using the .toogleClass() method.

It is similar like .toogle() but better for CSS manipulation.

First create class in your CSS that will represent your color and then toogle that class.

http://api.jquery.com/toggleClass/

Upvotes: 1

Andi Sholihin
Andi Sholihin

Reputation: 479

First, put the class attribute for <li> tag, example : 

<ul id ="ta" class="nav">
    <li id="a" class="navi"><a href="#tabs-1">0</a></li>
    <li id="b" class="navi"><a href="#tabs-2">5</a></li>
    <li id="c" class="navi"><a href="#tabs-3">10</a></li>
</ul>

next, make your code like this : 

$("li").click(function(){
    $(".navi").css('background-color', "");
    $(this).css('background-color', "#6F0");
});

Upvotes: 1

codingrose
codingrose

Reputation: 15699

Hide all .tabContent elements on page load and show them on click of li.

Write:

JS:

$("li").click(function () {
    $($(this).find("a").attr("href")).toggle();    
    $(this).toggleClass("active");
});

CSS:

.active {
    background-color:#6F0;
}
.tabContent {
    display:none;
}

DEMO here.

Upvotes: 2

Related Questions