如何使用jquery隐藏显示内容

Question

我正在创建一个工作部分，在该部分中我创建了一个带有一些图像容器的导航

现在当用户点击其中一个导航链接时。它将显示链接到该导航链接的相对图像容器。例如，如果我单击品牌链接，它将向我显示带有类品牌的图像容器。这就像 mix it up 插件，但我不能使用 mixitup。

我正在尝试这个：https://jsfiddle.net/to1uuvnb/19/

但它没有帮助

   <ul class="nav nav-pills nav-justified nav-tabss">
        <li class="active">
          <a href="#">All</a>
        </li>
        <li>
          <a href="#">Branding</a>
        </li>
        <li>
          <a href="#">Advertise</a>
        </li>
        <li>
          <a href="#">Print</a>
        </li>
      </ul>

      <div class="branding">
        branding
      </div>
      <div class="advertise">
        advertise
      </div>
      <div class="print">
        print
      </div>

我的 js

$('.nav-tabss').children('li').click(function(){

 var branding = $(this).text();

 if ( branding === "branding" )
 {
    $('.branding').show();
    $('.adverise').hide();
    $('.print').hide()
 }

});

我知道我的 js 代码效率不高。如果你们可以更新代码，那会更好，更有帮助，谢谢

Answer 1

$('.nav-tabss li a').click(function(){

    var branding = $(this).text();
//alert(branding)
     if ( branding === "Branding" )
     {
        $('.branding').show();
        $('.advertise').hide();
        $('.print').hide()
     }
    if ( branding === "All" )
     {
        $('.branding').show();
        $('.advertise').show();
        $('.print').show()
     }
     if ( branding === "Advertise" )
     {
        $('.branding').hide();
        $('.advertise').show();
        $('.print').hide()
     }
    if ( branding === "Print" )
     {
        $('.branding').hide();
        $('.advertise').hide();
        $('.print').show()
     }


  });

使用此代码

Answer 2

你可以用data属性代替href或text节点，data属性很灵活。

HTML

<ul class="nav nav-pills nav-justified nav-tabss">
   <li class="active"> <a data-filter="all" class="trigger" href="#">All</a></li>
   <li> <a data-filter="branding" class="trigger" href="#">Branding</a></li>
   <li> <a data-filter="advertise" class="trigger" href="#">Advertise</a></li>
   <li> <a data-filter="print" class="trigger" href="#">Print</a></li>
</ul>

<div class="branding">branding</div>
<div class="advertise">advertise</div>
<div class="print">print</div>

Javascript 代码使用 switch 语句来显示隐藏的 div。

JS

$('.trigger').click(function (e) {

    e.preventDefault();

    var branding = $(e.target).data('filter');
    console.log(branding);

    switch (branding) {

        case "branding":
            $('.branding').show();
            $('.advertise').hide();
            $('.print').hide();
            break;

        case "advertise":
            $('.advertise').show();
            $('.branding').hide();
            $('.print').hide();

            break;

        case "print":
            $('.advertise').hide();
            $('.branding').hide();
            $('.print').show();
            break;

        case "all":
            $('.advertise').show();
            $('.branding').show();
            $('.print').show();
            break;

        default:
            $('.branding').show();
            $('.advertise').show();
            $('.print').show();

    }

JSFiddle Link

Answer 3

检查你是否想要相同：

$('.nav-tabss').children('li').click(function(){

    var branding = $(this).text().trim().toLowerCase();

     if ( branding === "branding" )
     {
        $('.branding').show();
        $('.advertise').hide();
        $('.print').hide()
     }
    else if( branding === "advertise" )
     {
        $('.branding').hide();
        $('.advertise').show();
        $('.print').hide()
     }
    else if( branding === "print" )
     {
        $('.branding').hide();
        $('.advertise').hide();
        $('.print').show()
     }
    else 
     {
        $('.branding').show();
        $('.advertise').show();
        $('.print').show()
     }

  });

Click here

Answer 4

看看你的 html 看起来你正在使用引导程序。你为什么不直接使用bootstrap's tabs：

$(function() {
  $('#nav-tabss a').click(function(e) {
    e.preventDefault()
    $(this).tab('show')
  })
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div>
  <ul class="nav nav-pills nav-justified" id="nav-tabss">
    <li class="active">
      <a href="#none" data-toggle="tab">All</a>
    </li>
    <li>
      <a href="#branding" data-toggle="tab">Branding</a>
    </li>
    <li>
      <a href="#advert" data-toggle="tab">Advertise</a>
    </li>
    <li>
      <a href="#print" data-toggle="tab">Print</a>
    </li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="none">None</div>
    <div class="tab-pane" id="branding">Branding</div>
    <div class="tab-pane" id="advert">Advertise</div>
    <div class="tab-pane" id="print">Print</div>
  </div>
</div>

Answer 5

试试这个

$('.nav-tabss').on('click','a',function(){

var branding = $(this).text();

 if ( branding === "Branding" )
 {
    $('.branding').show();
    $('.adverise').hide();
    $('.print').hide()
 }

});