Changing an attribute of a variable selector in Jquery?

Question

I'm playing around with some Jquery as a hobby and I've run into a problem with changing the attribute of whatever the user clicks on. I have a bunch of tabs and didn't want to have create an event thingy for each of them, so I'm trying to put it all into one.

Sorry if it's a bit unclear, I don't really know the vocab of Jquery things.

var tabSelected = "default";
$('body').on("click",".subtab", function() {
                var tabChosen = this.id;
                tabChosen = tabChosen.substring(0, tabChosen.length-1); //cuts off T
                tabChosen = "'#" + tabChosen + "'"; //puts into '#id' format
                $(tabChosen).css('background-color','#E53939');
                $(tabSelected).css('background-color','#FFFFFF');
                tabSelected = tabChosen;
            });

For clarification I use separate ID's for tabs and subtabs, so for the div with Home id, the id of the subtab clicked is HomeT. The TabChosen then would be HomeT, which I've been trying to manipulate into the usual $('#id') thing I use, where the id has to be Home not HomeT.

I'm trying to change the color of whatever was clicked. In addition, I want the tab that the user was on to change back to the default color.

Any help is appreciated.

jsfiddle.net/arunpjohny/r66stqkw/1

Arun P Johny
– Arun P Johny

2015-03-12 04:43:07 +00:00
Commented Mar 12, 2015 at 4:43 — Arun P Johny
– Arun P Johny, Commented Mar 12, 2015 at 4:43

Việt Hoàng · Accepted Answer · 2015-03-12 04:31:37Z

1

Do this: tabChosen = "#" + tabChosen; //puts into '#id' format

answered Mar 12, 2015 at 4:31

Việt Hoàng

365 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

OffPlay · Accepted Answer · 2015-03-12 05:19:24Z

0

There is a convenient way of accomplishing this goal. But it requires the all target elements to have the same class, like so:

<html>
    <script>
        $(document).ready(function(){

            $('.subtab').click(function(){
                $(this).css('background-color', '#E53939')
                $(this).siblings().css('background-color', '#FFFFFF')
            })

        })
    </script>
    <body>
        <div id="t1T" class="subtab">t1</div>
        <div id="t2T" class="subtab">t2</div>
        <div id="t3T" class="subtab">t3</div>
    </body>
</html>

answered Mar 12, 2015 at 5:19

OffPlay

134 bronze badges

Collectives™ on Stack Overflow

Changing an attribute of a variable selector in Jquery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related