Question

我正在尝试在存储在变量中的内容之间切换。在开始位置显示所有内容。当单击（假设）option1时，option2的内容应该隐藏，并且仍然应该显示option1的内容。然后单击option2时，应保持显示option1，并且应重新显示option2的内容。在此之后，两者都应该像自己内容的“正常”切换一样。

因此var option1和2是a标签1＆amp;的内容。 2。

<ul class="thera-nav">
<li><a href="#">option1</a></li>
<li><a href="#">option2</a></li>
<ul> 

var option1 = $('div[class^="cn-list-row"]').filter("[class*='sporttherapie']");
var option2 = $('div[class^="cn-list-row"]').filter("[class*='massagetherapie']");

$('.thera-nav a').click(function() {
e.preventDefault(); 
//show this? and hide others only first time?
});

下面我找到了一个正确方向的答案，但我无法为此案做好准备。 Hide all but $(this) via :not in jQuery selector？

有人知道怎么做对吗？

下面的回复中的代码我无法开始工作，但稍微调整一下我几乎可以使用它。单击选项1时，将显示选项1，选项2将隐藏。我想念的是这个案例点击两次选项1.第一：隐藏两个显示一个。第二次：重新出现选项1.现在只有1或2：

$('.thera-nav a').click(function(e) {
e.preventDefault();
var str = $(this).text();
if (str == 'sporttherapie')
{
var option= $('div[class^="cn-list-row"]').filter("[class*='sporttherapie']");
}

else if (str == 'massagetherapie')
{
var option= $('div[class^="cn-list-row"]').filter("[class*='massagetherapie']");
}
option.siblings().hide();
option.show();

Answer 1

$('.thera-nav a').click(function(e) {
    e.preventDefault();
    switch $(this).text() {
        case 'option 1':
            var option = $('div[class^="cn-list-row"]').filter("[class*='sporttherapie']");
            break;
        case 'option 2':
            var option = $('div[class^="cn-list-row"]').filter("[class*='massagetherapie']");
            break;
        default:
            break;
    }
    option.siblings().hide();
    option.show();
    $(this).unbind('click').bind('click', function() {
        switch $(this).text() {
            case 'option 1':
                var option = $('div[class^="cn-list-row"]').filter("[class*='sporttherapie']");
                break;
            case 'option 2':
                var option = $('div[class^="cn-list-row"]').filter("[class*='massagetherapie']");
                break;
            default:
                break;
        option.toggle();
    });
});

我想这就是你想要的。

Answer 2

我确信它可以写得更短更有效，但它符合我的意思。首先点击它隐藏所有，但点击。然后一切都像平常一样翻转。

<div id="therapie">
 <ul class="thera-nav">
<li><a href="#" class='on'>sporttherapie</a></li>
<li><a href="#" class='on'>massagetherapie</a></li>
ul>
</div>

$('.thera-nav a').click(function(e) {
e.preventDefault();

var sporttherapie = $('div[class^="cn-list-row"]').filter("[class*='blub']");
var massagetherapie = $('div[class^="cn-list-row"]').filter("[class*='bla']");

var str = $(this).text();
if (str == 'sporttherapie' && $(this).hasClass('on'))
{
var option= sporttherapie
option.siblings().hide();
$('.thera-nav a').removeClass().addClass('of');
}

else if (str == 'massagetherapie' && $(this).hasClass('on'))
{
var option= massagetherapie
option.siblings().hide();
$('.thera-nav a').removeClass().addClass('of');
}

else if (str == 'sporttherapie' && $(this).hasClass('of'))
{
var option= sporttherapie
option.toggle();
}

else if (str == 'massagetherapie' && $(this).hasClass('of'))
{
var option= massagetherapie
option.toggle();
}

return false;

});

在变量之间切换（单击一次后更改）

2 个答案: