Question

我有这个当前脚本，非常适合更改类名

    $('#mydiv li a').click(
    function(e) {
      e.preventDefault(); // prevent the default action
      e.stopPropagation(); // stop the click from bubbling
      $(this).closest('ul').find('.current').removeClass('current');
      $(this).addClass('current');

    });

              <ul>
                   <li><a href="" class="current">one</a></li>
                   <li><a href="#">two</a></li>
                   <li><a href="#">three</a></li>
                   <li><a href="#">four</a></li>
               </ul>

现在我有4个不同的div区域

    <div id="first">some text and form</div>
    <div id="second">some text and form</div>
    <div id="third">some text and form</div>
    <div id="last">some text and form</div>

我用jquery隐藏了$(#second).hide(); $(third).hide();$(last).hide(); 所以当页面加载一个#first在页面上可见时，如果我点击上面列表项的第二个href，我想初始化$(second).show();并隐藏其他3个div，如果我点击上面列表中的第3个href，我想显示$(#third).show();等等。

所以从4个div中只有一个应该在页面上可见。有人可以帮助我展示我如何用上面的代码实现它吗？感谢

Answer 1

$('#mydiv li a').click(function(e) {
  $(this).closest('ul').find('.current').removeClass('current');
  $(this).addClass('current');

  $(this.href).show().siblings().hide();
  return false;
});


<ul>
  <li><a href="#first" class="current">one</a></li>
  <li><a href="#second">two</a></li>
  <li><a href="#third">three</a></li>
  <li><a href="#last">four</a></li>
</ul>

<div id="first">some text and form</div>
<div id="second">some text and form</div>
<div id="third">some text and form</div>
<div id="last">some text and form</div>

Answer 2

<div class="contentDiv" id="first">some text and form</div>
<div class="contentDiv" id="second">some text and form</div>
<div class="contentDiv" id="third">some text and form</div>
<div class="contentDiv" id="last">some text and form</div>

          <ul>
               <li class="first"><a href="" class="current">one</a></li>
               <li class="second"><a href="#">two</a></li>
               <li class="third"><a href="#">three</a></li>
               <li class="fourth"><a href="#">four</a></li>
           </ul>

现在点击“执行$(".contentDiv").hide();

”

然后只显示你想要的那个。

Answer 3

试试这个

$("#mydiv li a").click(function(e) {
   $(this).closest('ul').find('.current').removeClass('current');
   $(this).addClass('current'); 
   $("#mydiv > div").hide();
   var T = $(this).parent().index();
   if (T===0) {
       $("#first").show();
   } else if(T==1) {
       $("#second").show();
   } else if(T==2) {
       $("#third").show();
   } else if(T==3) {
       $("#last").show();
   }

  e.stopPropagation();
});

http://jsbin.com/izoxuv/edit#javascript,html,live

jquery显示不同的文本onclick

3 个答案: