javascript - 切换选项卡的时候，怎么可以让某个外部div的内容也改变

Question

求帮助，就像图上一样的。切换选项卡的时候，我想让外部的一个p的内容也改变。比如隐藏，显示

Answer 1

比如你想让第一个选项卡被点击的时候该p隐藏，第二个被点击的时候该p出现。
在切换选项卡事件触发的回调函数内，获取该选项卡的 index；

$targetp[['hide', 'show'][index]]();

这样就可以了。

不过这样做，会导致选项卡切换的事件逻辑与p隐藏动作的强耦合，更好的方法是采用观察者模式：

    $tab.on("click", function(){
        $(this).trigger("tabClick");
    });

    $tab.on("tabClick", function(){
        var index = $(this).index();
        $targetp[['hide', 'show'][index]]();
    });

Answer 2

1. 监听tab切换事件

2. 事件触发后，获取到外部p元素节点对象

3. 修改获取到的元素节点对象的visibility属性

Answer 3

JQuery版

$("#card").children().click(function(){
            //获取当前的li
            var $li = $(this);
            //当前点击的索引
            var index = $li.index();
            //添加选中样式，同辈互斥
            $li.addClass("on").siblings().removeClass("on");
            //内容显示，同辈隐藏
            $("#content").children().eq(index).show().siblings().hide();
        });

Answer 4

直接上代码
$(function(){

   var bb=$(".aa li");
   bb.click(function(){
    $(this).addClass("red")/*给当前元素添加样式*/
    .siblings().removeClass("red");/*给当前元素的同类移除样式*/
    var index=bb.index(this);/*获取点击的是ul中第几个li*/
    alert(index)
    $(".yy li")/*选取要显示区域的子节点*/
    .eq(index).show()/*显示菜单对应的子元素*/
    .siblings().hide();/*隐藏没有选中的子元素siblings是选取同级别元素的意思*/
});

});