Question

我有这段代码

＆＃13;

$(".inline-title a[data-toggle]").on("click", function(e) {
	  e.preventDefault(); // prevent navigating
	  var selector = $(this).data("toggle"); // get corresponding element
	  $(".documents").hide();
	  $("." + selector).show();
	  $('.inline-title a:first-child').removeClass('active');
	  $(".inline-title .active").removeClass('active');
	  $(this).addClass('active');
	});

＆＃13;

.active {
  color: green;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="inline-title">
  <a href="#" data-toggle="wcpf-test-1" class="active">This is the first test</a>
  <a href="#" data-toggle="wcpf-test-2">The second one is here !</a>
</div>

<div class="documents wcpf-test-1">
    <p>Hello World</p>
    <p>Hello world</p>
</div>

<div class="documents wcpf-test-2">
    <p>Hello World</p>
    <p>Hello world</p>
</div>

＆＃13;

我想要的是

首先我的div没有显示在页面

中

当您点击包含data-toggle="wpcf-test-1"的第一个链接时，会出现以下带有wpcf-test-1类的div。

然后，如果您点击带有data-toggle="wpcf-test-2"的seconf链接，则会显示以下带有wpcf-test-2类的div，另一个消失。

感谢您的帮助！

Answer 1

这对你有用

$(document).ready(function() {
     $("a").on("click",function(){
       var classname = $(this).data("toggle");
        $("div.documents").hide();
        $(this).next("div."+classname).slideToggle("400");
     })
});

Answer 2

你可以这样做：

＆＃13;

$('a').click(function(e){
    e.preventDefault();
    $(".documents").hide(); // Hide other .documents div
    $(this).next().show();  // Display the one next to the `a` clicked
});

＆＃13;

.documents{
    display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<a href="#" data-toggle="wcpf-test-1">This is the first test</a>
<div class="documents wcpf-test-1">
    <p>Hello World</p>
    <p>Hello world</p>
</div>
<a href="#" data-toggle="wcpf-test-2">The second one is here !</a>
<div class="documents wcpf-test-2">
    <p>Hello World</p>
    <p>Hello world</p>
</div>

＆＃13;

Answer 3

＆＃13;

$(function() {
  $('.documents').hide();
  $('a[data-toggle]').on('click', function(e) {
    e.preventDefault();
    $('.documents').hide();
    var selector = $(this).data('toggle');
    $('.'+selector).show();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" data-toggle="wcpf-test-1">This is the first test</a>
<div class="documents wcpf-test-1">
    <p>Hello World</p>
    <p>Hello world</p>
</div>
<a href="#" data-toggle="wcpf-test-2">The second one is here !</a>
<div class="documents wcpf-test-2">
    <p>Hello World</p>
    <p>Hello world</p>
</div>

＆＃13;

因此，该脚本首先隐藏了所有div.documents。

然后我在每个具有data-toggle属性的锚点上添加了一个触发器。点击后，div.documents隐藏所有内容，然后显示与data-toggle对应的div。

Answer 4

$(function(){
  $('a[data-toggle]').on('click', function(){
    $('div.' + $(this).data('toggle')).toggle();
  });
});

Answer 5

这将按预期工作：

JQUERY：

$('a').on('click', function() {
    $('div.documents').hide();
    var elem = $(this).attr('data-toggle');
    $('div.' + elem).show();
});

CSS：

.documents {display: none;}

显示与其链接JQuery相关的每个div

5 个答案: