How to show/hide content based on a css class

Question

HTML:

<ul class="ulSPStyle">
    <li><a class="tfSPHT" id="current" href="javascript:void(0);">one</a></li>
    <li><a class="tfSPOPT" href="javascript:void(0);">two</a></li>
    <li><a class="tfSPAT" href="javascript:void(0);">three</a></li>
    <li><a class="tfSPPT" href="javascript:void(0);">four</a></li>
    <li><a class="tfSPCT" href="javascript:void(0);">five</a></li>
</ul>

<div class="tfSPHT1 dispArtBody">
    one content
</div>
<div class="tfSPOPT1 dispArtBody hideContent">
    two content
</div>
<div class="tfSPAT1 dispArtBody hideContent">
    three content
</div>
<div class=" tfSPPT1 dispArtBody hideContent">
    four content
</div>
<div class="tfSPCT1 dispArtBody hideContent">
    five content
</div>

CSS:

.hideContent {
    display: none;
}

JQuery:

$(document).ready(function() {
    $(".tfSPHT").on("click", "body", function() {
        $(".tfSPHT1").removeClass("hideContent");
    });
    $(".tfSPOPT").on("click", "body", function() {
        $(".tfSPOPT1").removeClass("hideContent");
    });
    $(".tfSPAT").on("click", "body", function() {
        $(".tfSPAT1").removeClass("hideContent");
    });
    $(".tfSPPT").on("click", "body", function() {
        $(".tfSPPT1").removeClass("hideContent");
    });
    $(".tfSPCT").on("click", "body", function() {
        $(".tfSPCT1").removeClass("hideContent");
    });
});

How can I modify my JQuery so depending on the link that is clicked, show only the content for the corresponding class with a 1 at the end and make that link the current id.

Answer 1

Observe the following code:

<ul class="ulSPStyle">
    <li><a class="tfSPHT clickMe" data-toggle=".tfSPHT1" id="current" href="javascript:void(0);">one</a>
    </li>
    <li><a class="tfSPOPT clickMe" data-toggle=".tfSPOPT1" href="javascript:void(0);">two</a>
    </li>
    <li><a class="tfSPAT clickMe" data-toggle=".tfSPAT1" href="javascript:void(0);">three</a>
    </li>
    <li><a class="tfSPPT clickMe" data-toggle=".tfSPPT1" href="javascript:void(0);">four</a>
    </li>
    <li><a class="tfSPCT clickMe" data-toggle=".tfSPCT1" href="javascript:void(0);">five</a>
    </li>
</ul>

I think the easiest, most universal approach would be to make use of HTML 5's data-* attributes which allow you to create custom data tags per each element. You can effectively store any type of data within said tags, which makes it useful if you are loading the information via the backend.

Here is the jQuery code:

$(document).ready(function () {
    $('.clickMe').click(function () {
        $('.clickMe').removeAttr('id');
        $(this).attr('id', 'current');
        $('.dispArtBody').addClass('hideContent');
        var element = $(this).attr("data-toggle");
        $(element).removeClass('hideContent');
    })
});

This will allow you to remove the current id from the previous link and then set it equal to the link that was recently clicked. It also hides all of the content and then shows the necessary information.

JsFiddle

Answer 2

Other answers work, but there are a lot of pitfalls with the current structure of your HTML.

I prefer using an approach like this.

<style>
    .link{
        color:#000;
    }
    .link.current{
        color:#00f;
    }
    .content{
        display:none;
    }
    .content.active{
        display:block;
    }
</style>

<div id="links">
    <a class="link current"href="#">1</a>
    <a class="link" href="#">2</a>
    <a class="link" href="#">3</a>
</div>

<div id="content">
    <p class="content active">Content 1</p>
    <p class="content">Content 2</p>
    <p class="content">Content 3</p>
</div>

<script>
    $(".link").click(function(event) {
        event.preventDefault();
        var index = $(this).index();
        $(".link").removeClass("current");
        $(this).addClass("current");
        $(".content").removeClass("active");
        $(".content").eq(index).addClass("active");
    });
</script>

http://jsfiddle.net/3fjehk7e/1/

Answer 3

You can try this JSFiddle

Using a simple function

 $('li a').click(function () {
    var cls = $(this).attr('id');

    $('div').hide();
    $('div.' + cls).show();

    $('.current').removeClass('current');
    $(this).addClass('current');
});

Answer 4

You just need to make a couple of amendments to your jQuery code and clean it up a bit and it should work fine.

 $(document).ready(function() { // check document has fully loaded $('li a').click(function() { // run function when element is clicked $('li a').removeAttr('id'); // remove ID from all links $(this).attr('id', 'current'); // set id to current for clicked link var cls = $(this).attr('class'); // get class of clicked $('.dispArtBody').hide(); // hide all other divs $('.'+cls+'1').show(); // show div with class of clicked + 1 }); }); 

 .hideContent { display: none; } a#current { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="ulSPStyle"> <li><a class="tfSPHT" id="current" href="javascript:void(0);">one</a></li> <li><a class="tfSPOPT" href="javascript:void(0);">two</a></li> <li><a class="tfSPAT" href="javascript:void(0);">three</a></li> <li><a class="tfSPPT" href="javascript:void(0);">four</a></li> <li><a class="tfSPCT" href="javascript:void(0);">five</a></li> </ul> <div class="tfSPHT1 dispArtBody"> one content </div> <div class="tfSPOPT1 dispArtBody hideContent"> two content </div> <div class="tfSPAT1 dispArtBody hideContent"> three content </div> <div class=" tfSPPT1 dispArtBody hideContent"> four content </div> <div class="tfSPCT1 dispArtBody hideContent"> five content </div> 

As suggested by BuddhistBeast, you should really set the link class's to be the ID's instead. and then amend the jQuery to follow that.

Example:

<li><a id="tfSPHT" class="current" href="javascript:void(0);">one</a></li>

Answer 5

This is my take on it...

$(document).ready(function() {
    $(".ulSPStyle > li > a").on('click', function(){
        var className = $(this).attr('class');
        console.log( className );
        // Updated (with feedback from @BuddhistBeast -thanks)
        $('.dispArtBody').addClass('hideContent');

        $("." + className + "1" ).removeClass( "hideContent" );
    });
});

DEMO

Answer 6

如果您使用@aSharma答案中的代码，要管理ID，您需要添加：

 $(this).closest("ul").find("a").attr("id", "").end().end().attr("id", "current");

Answer 7

Try

$(".ulSPStyle li a").on("click", function(e) {
  $("[class^=" + e.target.className + 1 + "]")
  .removeClass("hideContent")
  .siblings("div[class^=tf]")
  .addClass("hideContent")
});

 $(".ulSPStyle li a").on("click", function(e) { $("[class^=" + e.target.className + 1 + "]") .removeClass("hideContent") .siblings("div[class^=tf]") .addClass("hideContent") }); 

 .hideContent { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <ul class="ulSPStyle"> <li><a class="tfSPHT" id="current" href="javascript:void(0);">one</a></li> <li><a class="tfSPOPT" href="javascript:void(0);">two</a></li> <li><a class="tfSPAT" href="javascript:void(0);">three</a></li> <li><a class="tfSPPT" href="javascript:void(0);">four</a></li> <li><a class="tfSPCT" href="javascript:void(0);">five</a></li> </ul> <div class="tfSPHT1 dispArtBody"> one content </div> <div class="tfSPOPT1 dispArtBody hideContent"> two content </div> <div class="tfSPAT1 dispArtBody hideContent"> three content </div> <div class=" tfSPPT1 dispArtBody hideContent"> four content </div> <div class="tfSPCT1 dispArtBody hideContent"> five content </div>