如何根据点击值jquery显示隐藏内容

试试这个：使用 contentdiv 的索引来显示hidden-box

$(function(){
    $('.content').click(function(){
      var index = $(this).index();
        $('.hidden-content .hidden-box:eq('+index+')').show();
    });
});

并在您的 css 中进行更改，而不是隐藏div hidden-content您需要隐藏hidden-box .所以改变你的

.hidden-content{
    display:none;
}

自

.hidden-box{
    display:none;
}

演示

如果你想坚持使用你拥有的当前 HTML，它将是繁琐和肮脏的，因为有两种方法可以处理这种情况。

1. 将像"Cont 1"这样的字符串翻译成"一"，"Cont 2"翻译成"two"。到九点都很好，但是100->一百呢？甚至一千？
2. 另一种方法是不要将隐藏框命名为"b-one"、"b-two"，而是将它们命名为"b-1"、"b-2"、"b-3"。这样，您可以检测单击的元素，然后擦除"Cont"部分，然后使用字符串的其余部分来获取隐藏部分的类。

上述两种情况仍然会给你一个非常非常脏的代码，因为你必须得到点击元素的.html()和h1标签的提示。

所以我的建议是遵循以下方法。

.HTML：

<div class="box">
    <div class="content one" rel="1">
        <h1>Cont 1</h1>
    </div>
    <div class="content two" rel="2">
        <h1>Cont 2</h1>
    </div>
    <div class="content three" rel="3">
        <h1>Cont 3</h1>
    </div>
</div>
<div class="hidden-content">
    <div class="hidden-box b-1">one</div>
    <div class="hidden-box b-2">two</div>
    <div class="hidden-box b-2">three</div>    
</div>

.JS：

$('.content').on('click', function(){
    var divNum = this.rel;
    $('.b-'+divNum).show();
});

我建议通过以下方式重组你的 HTML：

<div class="box">
<div class="content" id= "c1">
    <h1>Cont 1</h1>
</div>
<div class="content" id= "c2">
    <h1>Cont 2</h1>
</div>
<div class="content" id= "c3">
    <h1>Cont 3</h1>
</div>

<div class="hidden-content">
<div class="hidden-box" id= "h1">one</div>
<div class="hidden-box" id= "h2">two</div>
<div class="hidden-box" id= "h3">three</div>    

然后使用它作为你的jQuery代码：

$('.content').click(function(){
var num = $(this).attr('id').split("c")[1];
$("#h"+num).show();
});

顺便说一下，也改变你的 CSS：

.hidden-content{
/*    display:none;*/
}
.hidden-box{
width:35px;
height:35px;
border:1px solid black;
display:none;
}

这是另一种方式(虽然不是那么可靠，因为如果你改变你的类，它会中断(：

$(function () {
    $('.content').on('click', function () {
        var className = $(this).attr('class').replace('content', '').trim();        
        $('.hidden-box').hide();
        $('.b-' + className).show();
    });
});

.hidden-box {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
    <div class="content one">
        <h1>Cont 1</h1>
    </div>
    <div class="content two">
        <h1>Cont 2</h1>
    </div>
    <div class="content three">
        <h1>Cont 3</h1>
    </div>
</div>
<div class="hidden-content">
    <div class="hidden-box b-one">one</div>
    <div class="hidden-box b-two">two</div>
    <div class="hidden-box b-three">three</div>    
</div>

更新

根据我同意@Regent评论，这将是一种更可靠的方法，因为即使您更改标记，它也会起作用。您只需要在标记中添加一个用于匹配元素的 data 属性：

$(function () {
    $('.content').on('click', function () {        
        var sel = $(this).data('rel');
        
        $('.hidden-box').each(function () {
            $(this).toggle($(this).data('rel') == sel);
        });
    });
});

.hidden-box {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="box">
    <div class="content one" data-rel="1">
        <h1>Cont 1</h1>
    </div>
    <div class="content two" data-rel="2">
        <h1>Cont 2</h1>
    </div>
    <div class="content three" data-rel="3">
        <h1>Cont 3</h1>
    </div>
</div>
<div class="hidden-content">
    <div class="hidden-box b-one" data-rel="1">one</div>
    <div class="hidden-box b-two" data-rel="2">two</div>
    <div class="hidden-box b-three" data-rel="3">three</div>    
</div>