Question

我希望当我点击#tab1时，应首先打开身份panel的{{1}} tab1。并且所有li完成了该过程。

我在jquery中并不完美。

请帮忙。

＆＃13;

$(document).ready(function($) {
  $('ul li a#').click(function(){
    $('').addClass('show')
  })
});

＆＃13;

ul{height: 40px;}
  li{float: left;padding: 5px;background-color: #ccc;color:#333;margin-left: 10px;list-style: none;}
  .panel{height:100px;width: 800px;margin: 0 auto 10px;background-color: #ccc;/*display: none;*/}
  .show{display: block;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li> <a href="#tab1">Tab1</a></li>
  <li> <a href="#tab2">Tab2</a></li>
  <li> <a href="#tab3">Tab3</a></li>
  <li> <a href="#tab4">Tab4</a></li>
</ul>

<div class="panel" id="tab1">
  1
</div>


<div class="panel" id="tab2">
  2
</div>


<div class="panel" id="tab3">
  3
</div>


<div class="panel">
  4
</div>

＆＃13;

Answer 1

您可以简单地使用.hide()和.show()，而不是添加类，并将data-id属性添加到具有相应a的{{1}}元素，以便在点击时，您可以检索id并在其上应用id。

.show()

$(document).ready(function() {
  $('.panel').hide();
  $('#tab1').show();
  $('ul li a').click(function() {
    $('.panel').hide();
    $('#' + $(this).data('id')).show();
  })
});

ul {
  height: 40px;
}
li {
  float: left;
  padding: 5px;
  background-color: #ccc;
  color: #333;
  margin-left: 10px;
  list-style: none;
}
.panel {
  height: 100px;
  width: 800px;
  margin: 0 auto 10px;
  background-color: #ccc;
  /*display: none;*/
}

Answer 2

使用.show()＆amp;而是hide()。例如：

＆＃13;

ul{height: 40px;}
    li{float: left;padding: 5px;background-color: #ccc;color:#333;margin-left: 10px;list-style: none;}
    .panel{height:100px;width: 800px;margin: 0 auto 10px;background-color: #ccc;/*display: none;*/}
    .show{display: block;}

＆＃13;

<ul>
    <li> <a href="#tab1">Tab1</a></li>
    <li> <a href="#tab2">Tab2</a></li>
    <li> <a href="#tab3">Tab3</a></li>
    <li> <a href="#tab4">Tab4</a></li>
</ul>
<div class="panel" id="tab1">
    1
</div>
<div class="panel" id="tab2">
    2
</div>
<div class="panel" id="tab3">
    3
</div>
<div class="panel"  id="tab4">
    4
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.panel').hide(); $('#tab1').show();
        $('ul li a').click(function(){
            $('.panel').hide();
            $(this).addClass('show');
            var id = $(this).attr('href');
            $(id).show();
        })
    });
</script>

＆＃13;

Answer 3

我会提出纯CSS解决方案，而不需要任何javascript。您可以使用:target伪类来显示哪个id对应于当前所选位置哈希的面板。

要实现此目的，您需要默认设置.panel隐藏，并使用规则.panel:target {display: block}进行显示。

＆＃13;

ul {height: 40px;}
li {float: left; padding: 5px; background-color: #ccc; color:#333; margin-left: 10px;list-style: none;}

.panel {height: 100px; background-color: #ccc; display: none;}
.panel:target {
    display: block;
}

＆＃13;

<ul>
  <li> <a href="#tab1">Tab1</a></li>
  <li> <a href="#tab2">Tab2</a></li>
  <li> <a href="#tab3">Tab3</a></li>
  <li> <a href="#tab4">Tab4</a></li>
</ul>

<div class="panel" id="tab1">1</div>
<div class="panel" id="tab2">2</div>
<div class="panel" id="tab3">3</div>
<div class="panel" id="tab4">4</div>

＆＃13;

Answer 4

这应该对你有所帮助！

＆＃13;

$(document).ready(function($) {

  $('ul li a').click(function(){

    var active_id = $('div.panel.show').attr('id');
    var new_id = $(this).attr('href');

    if( active_id !== 'undefined' && '#'+active_id == new_id ) {
      $(new_id).removeClass('show');
    }
    else {
      $('div.panel').removeClass('show');
      $(new_id).addClass('show');
    }
  })
});

＆＃13;

ul{height: 40px;}
  li{float: left;padding: 5px;background-color: #ccc;color:#333;margin-left: 10px;list-style: none;}
  .panel{height:100px;width: 800px;margin: 0 auto 10px;background-color: #ccc;display: none;}
  .show{display: block;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li> <a href="#tab1">Tab1</a></li>
  <li> <a href="#tab2">Tab2</a></li>
  <li> <a href="#tab3">Tab3</a></li>
  <li> <a href="#tab4">Tab4</a></li>
</ul>

<div class="panel" id="tab1">
  1
</div>


<div class="panel" id="tab2">
  2
</div>


<div class="panel" id="tab3">
  3
</div>


<div class="panel"  id="tab4">
  4
</div>

＆＃13;

Answer 5

fiddle example

  $(document).ready(function ($) {
            var firstitem = $("#tabmenu li").first();
            firstitem.addClass("activeitem");
            showSelectedItem(firstitem.find("a").attr("data-href"));
            $('#tabmenu li').click(function () {
                $(this).addClass("activeitem");
                $('#tabmenu li').not(this).removeClass("activeitem")
                showSelectedItem($(this).find("a").attr("data-href"));
                //  $('').addClass('show')
            })
        });

        function showSelectedItem(selector) {
            $(selector).addClass("activepanel").fadeIn("slow");
            $(".panel").not(selector).removeClass("activepanel").hide();
        }

在jsfidde中查看以上示例，让我知道您的反馈

如何制作标签菜单

5 个答案: