2

我需要创建显示/隐藏多个 div 的导航。

这是我需要做的事情：如果用户单击任何“选项”，我需要一个名为“已选择”的类，该类与导航中当前选择或选择的项目相关联 - 这意味着向锚点添加一个类. 您将在下面的示例中看到“选定”类的 CSS 样式。

查看当前进度

我也无法尝试在加载时选择“选项 1”或“选项 2”，以便所有 div 都不会出现 - 加载时我只需要一个 div 显示正确的“选项”“选择”如果那样说得通。

欢迎所有建议！

4

5 回答 5

3

您应该使用数据属性，因为它target不是真正有效的。我将其更改为data-target并做了：

$('.showSingle').on('click', function () {
    $(this).addClass('selected').siblings().removeClass('selected');
    $('.targetDiv').hide();
    $('#div' + $(this).data('target')).show();
});​

小提琴

on()只能在 jQuery 1.7+ 中使用，所以如果使用旧版本的 jQuery（你的小提琴是），坚持使用click().

于 2012-08-23T00:30:46.763 回答
1

请参阅http://jsfiddle.net/XwN2L/415/。它从所有锚点中删除“选定”类.showSingle，然后将“选定”类添加到单击的锚点。.targetDiv此外，它通过隐藏所有s 并仅显示第一个来处理 onload 问题。

编辑：也应该在页面加载时以红色突出显示第一个选项。http://jsfiddle.net/XwN2L/421/

于 2012-08-23T00:30:48.467 回答
1

编辑：对于非 JQuery 解决方案，试试这个：

function showHide(element) { 
     var field = document.getElementById(element); 
     if (element) { 
          if (field.style.display == 'none') { 
                field.style.display = 'block'; 
          } else { 
                field.style.display = 'none'; 
          } 
     } 
}

那将是您在 JS 中显示和隐藏的代码

<div class="buttons">
    <button class="showSingle" target="1" onClick="showHide(div1);">Option 1</button>
    <button class="showSingle" target="2" onClick="showHide(div2);">Option 2</button>
    <button class="showSingle" target="3" onClick="showHide(div3);">Option 3</button>
    <button class="showSingle" target="4" onClick="showHide(div4);">Option 4</button>
</div>

<div id="div1" class="targetDiv" style="display:none">Lorum Ipsum 1</div>
<div id="div2" class="targetDiv" style="display:none">Lorum Ipsum 2</div>
<div id="div3" class="targetDiv" style="display:none">Lorum Ipsum 3</div>
<div id="div4" class="targetDiv" style="display:none">Lorum Ipsum 4</div>​

这应该让你开始:-)

完全错过了我的 Jquery

于 2012-08-23T00:32:43.777 回答
1 
$('.showSingle').click(function () {
   $('.targetDiv').hide();
   $('#div' + $(this).attr('target')).show();
   $('.showSingle').removeClass('selected')
   $(this).addClass('selected');           
});

var active_link = 1; // Change this value to set the active link
$('a[target='+active_link+']').trigger('click');​
于 2012-08-23T00:41:39.963 回答
0

对于您的第一个麻烦，您可以在点击事件中添加以下两行：

    $(".buttons .selected").removeClass("selected");
    $(this).addClass("selected");

或者正如 Irrelepant 所说（实际上是更好的方法）：

$(this).addClass('selected').siblings().removeClass('selected');
于 2012-08-23T01:10:33.747 回答