Question

JQuery 如何实现“选项卡”点击切换？ 求JQuery 点击事件代码，是点击不是鼠标滑过切换。谢谢！！高分

默认是最新帖子的内容，并且背景是灰色的框（有个小箭头的）！

<dl class="box"
<!-- 标题-->
<dt>
<span class="span1" id="zuixintiezi">最新帖子</span>
<span class="span2" id="remenzhuti">热门主题</span>
<span class="span3" id="xinwendongtai">新闻动态</span>
</dt>

<!-- 三个DD 是三个区域的内容，点击上面dt span 对应显示下面的

DD -->
<dd class="n_card" id="n_cardID">
<ul>
<li>最新帖子 </li>
<ul>
</dd>
<dd class="h_theme" id="h_themeID">
<ul>
<li>热门主题 </li>
<ul>
</dd>

<dd class="d_news" id="d_newsID">
<ul>
<li>新闻动态</li>
<ul>
</dd>
</dl>
$(function(){
这里面的JS代码怎么写？

});

dl 是被一个div 包裹的！！

Answer 1

$(function() {
//选项卡
$(".order_list ul li").click(function() {
$(this).addClass("on").siblings().removeClass("on"); //切换选中的按钮高亮状态(添加on)
var index = $(this).index(); //获取被按下按钮的索引值，需要注意index是从0开始的
$(".order_xxk > div").eq(index).show().siblings().hide(); //在按钮选中时在下面显示相应的内容，同时隐藏不需要的框架内容
});
});
<div class='order_list'>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<div class="order_xxk">
<div class="yige">1</div>
<div class="erge">2</div>
</div>

Answer 2

<dt>
<!--建议加个name属性，保存各自需要显示的id-->
<span class="span1" name="n_cardID" id="zuixintiezi">最新帖子</span>
<span class="span2" name="h_themeID" id="remenzhuti">热门主题</span>
<span class="span3" name="d_newsID" id="xinwendongtai">新闻动态</span>
                            </dt>

$("dt[span]").each(function(){
  $(this).click(function(){
      $("dt[span]").each(function(){
         var oldids=$(this).attr("name");
          $("#"+oldids).hide();
      });
     var ids=$(this).attr("name");
     $("#"+ids).show();
  });
});

追问

$(function(){
这里面的JS代码怎么写？

});

追答

$(function(){
   //这样写，下面的代码可能会报错，因为页面是执行顺序是从上往下的，如果先加载js(木有加载到html时，$("dt[span]")是空对象)
   $("dt[span]").each(function(){
  $(this).click(function(){
      $("dt[span]").each(function(){
         var oldids=$(this).attr("name");
          $("#"+oldids).hide();
      });
     var ids=$(this).attr("name");
     $("#"+ids).show();
  });
});
});
//这样写不好，有些浏览器可能会出现一些小问题，建议这样：
$(document).ready(function(){
//使用ready，是当页面body加载完成后执行的
    $("dt[span]").each(function(){
  $(this).click(function(){
      $("dt[span]").each(function(){
         var oldids=$(this).attr("name");
          $("#"+oldids).hide();
      });
     var ids=$(this).attr("name");
     $("#"+ids).show();
  });
});
});

追问

我试了，不行啊？可以QQ么？

追答

 $("dt[span]").each(function(){
  $(this).click(function(){
      $("dt[span]").each(function(k,v){
         var oldids=$(v).attr("name");
          $("#"+oldids).hide();
      });
     var ids=$(this).attr("name");
     $("#"+ids).show();
  });
  });

看看引用了jq木有。

追问