Question

<div class="nav">
<a href="#" data-category-type="high">high</a>

<a href="#" data-category-type="low" data-category-name="air">low</a>

<a href="#" data-category-name="pizza">pizza</a>

</div>
<div id="Categories">
    <div class="hide" data-category-type="high" data-category-name="pizza">high</div>
    <div class="hide" data-category-type="low" data-category-name="pasta">low</div>
    <div class="hide" data-category-type="low" data-category-name="pizza">low</div>
    <div class="hide" data-category-type="high" data-category-name="pasta">high</div>
</div>

使用Javascript：

$('.nav a').on('click', function (e) {
    e.preventDefault();
    var cat = $(this).data('categoryType');
    var nam = $(this).data('categoryName');
    $('#Categories > div').hide();
    $('#Categories > div[data-category-type="'+cat+'"]').show();
    $('#Categories > div[data-category-name="'+nam+'"]').show();

});

默认情况下，我只想显示类型为“高”的div 有人可以告诉我如何设置默认状态而不是显示所有状态吗？

Answer 1

隐藏类别中的所有div并显示NULL

的div

ON

type = "high"

Answer 2

你可以尝试，我只是添加条件来检查它是否高

  $('.nav a').on('click', function (e) {
    e.preventDefault();
    var cat = $(this).data('categoryType');
    var nam = $(this).data('categoryName');
    $('#Categories > div').hide();
    if(cat=="high"){
    $('#Categories > div[data-category-type="'+cat+'"]').show();
    $('#Categories > div[data-category-name="'+nam+'"]').show();
  }else{
       $('#Categories > div[data-category-type="'+cat+'"]').hide();
      $('#Categories > div[data-category-name="'+nam+'"]').hide();

   }


});

Answer 3

你可以用两种方式做到这一点。

设置style =＆＃34; display：none＆＃34;对于你不想表现的div。
隐藏$（文档）.ready中的div。

使用下面提到的html或javascript。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<a href="#" data-category-type="high">high</a>

<a href="#" data-category-type="low" data-category-name="air">low</a>

<a href="#" data-category-name="pizza">pizza</a>

</div>
<div id="Categories">
    <div class="hide" data-category-type="high" data-category-name="pizza">high</div>
    <div class="hide" style="display:none" data-category-type="low" data-category-name="pasta">low</div>
    <div class="hide" style="display:none" data-category-type="low" data-category-name="pizza">low</div>
    <div class="hide" data-category-type="high" data-category-name="pasta">high</div>
</div>

＆＃13;

server {
listen 80;

server_name peoplehum.dev www.peoplehum.dev;
#rewrite ^/(.*)/$ /$1 permanent;
charset utf-8;
keepalive_requests 100;
keepalive_timeout 100s;
gzip on;
gzip_http_version 1.1;
gzip_vary on;
gzip_comp_level 6;
gzip_proxied any;
gzip_buffers 16 8k;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
client_max_body_size 16M;

#include /etc/nginx/proxy_header.conf;
#include /etc/nginx/proxy_buffer.conf;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_http_version 1.1;
proxy_set_header HOST $host;

#X-Forwarded-Proto header gives the proxied server information about the schema of the original client request (whether it was an http or an https request).
proxy_set_header X-Forwarded-Proto $scheme;

#The X-Real-IP is set to the IP address of the client so that the proxy can correctly make decisions or log based on this information.
proxy_set_header X-Real-IP $remote_addr;

#The X-Forwarded-For header is a list containing the IP addresses of every server the client has been proxied through up to this point.
#In the example above, we set this to the $proxy_add_x_forwarded_for variable.
#This variable takes the value of the original X-Forwarded-For header retrieved from the client and adds the Nginx server's IP address to the end.
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

＆＃13;

Answer 4

您可以使用CSS样式隐藏div，如下所示：

<div class="hide" data-category-type="high" data-category-name="pizza">high</div>
<div style="display: none" class="hide" data-category-type="low" data-category-name="pasta">low</div>
<div style="display: none" class="hide" data-category-type="low" data-category-name="pizza">low</div>
<div class="hide" data-category-type="high" data-category-name="pasta">high</div>

如何设置默认过滤器来隐藏div

4 个答案: