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.

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.

• javascript
• jquery
• html
• css

• 1 Are you looking for something like this? jsfiddle/Lc14jgoh/2 I just edited this ment to show the ability to toggle the show/hide – BuddhistBeast Commented Mar 18, 2015 at 17:54
• Something similar except when one content is shown the rest should be hidden and also the clicked link should have the current id. – SearchForKnowledge Commented Mar 18, 2015 at 17:56
• jsfiddle/Lc14jgoh/4 try this now. – SearchForKnowledge Commented Mar 18, 2015 at 17:58
• 1 What about this? jsfiddle/Lc14jgoh/5 – BuddhistBeast Commented Mar 18, 2015 at 17:59
• 1 The above acplishes that... I added the styles to show you... jsfiddle/Lc14jgoh/7 – BuddhistBeast Commented Mar 18, 2015 at 18:01

7 Answers 7

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

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/3fjehk7e/1/

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./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>

If you using the code from @aSharma answer, to manage ID you need to add:

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

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

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');
});

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./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis./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>