如何基于css类显示/隐藏内容

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

如何根据点击的链接修改我的JQuery，只显示相应类的内容，最后输入1，并将该链接设为current id。

Answer 1

请注意以下代码：

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

我认为最简单，最通用的方法是使用HTML 5的data-*属性，这些属性允许您为每个元素创建自定义数据标记。您可以在所述标记中有效地存储任何类型的数据，这使得在通过后端加载信息时非常有用。

这是jQuery代码：

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

这将允许您从上一个链接中删除current ID，然后将其设置为最近点击的链接。它还隐藏了所有内容，然后显示了必要的信息。

JsFiddle

Answer 2

其他答案有效，但HTML的当前结构存在很多缺陷。

我更喜欢使用这样的方法。

<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

您可以尝试此JSFiddle

使用简单的功能

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

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

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

Answer 4

你只需要对你的jQuery代码进行一些修改并稍微清理一下它应该可以正常工作。

$(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>

正如BuddhistBeast所建议的，您应该将链接类设置为ID。然后修改jQuery以遵循它。

示例：

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

Answer 5

这是我对它的看法......

$(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回答中的代码，则需要添加管理IF：

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

Answer 7

尝试

$(".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>