切换与其内容Jquery的链接

时间:2015-07-22 08:55:05

标签: javascript jquery

我有这段代码 http://jsfiddle.net/tdvtjqah/

$("a[data-toggle]").on("click", function (e) {
	    e.preventDefault(); // prevent navigating
	    var selector = $(this).data("toggle"); // get corresponding element
	    $(".category").hide();
	    $(selector).show();
	});



$('.inline-link a').click(function () {

	$('.inline-link').find('a').removeClass('active');
   	$(this).addClass('active');

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="inline-link">
    <a href="#" data-toggle="cat-75">Category 75</a>
    <a href="#" data-toggle="cat-76">Category 76</a>
    <a href="#" data-toggle="cat-77">Category 77</a>
</div>

<div class="category cat-75">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore non eius voluptatem quo odio vitae dolor tenetur labore quia totam ipsum ad nulla amet quidem suscipit neque quam porro sunt.  
</div>
<div class="category cat-76">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore non eius voluptatem quo odio vitae dolor tenetur labore quia totam ipsum ad nulla amet quidem suscipit neque quam porro sunt.  
</div>
<div class="category cat-76">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore non eius voluptatem quo odio vitae dolor tenetur labore quia totam ipsum ad nulla amet quidem suscipit neque quam porro sunt.  
</div>

当您点击链接时,我希望其内容显示。

当您点击其他链接时,其内容显示和其他链接将隐藏。

我尝试将链接和类别与[data-toggle]匹配,但在我的代码中,它不起作用。

感谢您的帮助!

3 个答案:

答案 0 :(得分:3)

您需要选择带点或散列的选择器。在你的情况下,你已经在课堂上定义了它们,所以这样做:

$('.'+selector).show();

答案 1 :(得分:1)

问题是selector返回cat-75,应该是.cat-75(缺少点)。因此,将选择器更改为$("."+selector)

我在代码中更改了它:

&#13;
&#13;
$("a[data-toggle]").on("click", function (e) {
	    e.preventDefault(); // prevent navigating
	    var selector = $(this).data("toggle"); // get corresponding element
	    $(".category").hide();
	    $("."+selector).show();
        $(".inline-link .active").removeClass('active');
        $(this).addClass('active');
	});
&#13;
.active {
  background: yellow;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="inline-link">
    <a href="#" data-toggle="cat-75">Category 75</a>
    <a href="#" data-toggle="cat-76">Category 76</a>
    <a href="#" data-toggle="cat-77">Category 77</a>
</div>

<div class="category cat-75">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore non eius voluptatem quo odio vitae dolor tenetur labore quia totam ipsum ad nulla amet quidem suscipit neque quam porro sunt.  
</div>
<div class="category cat-76">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore non eius voluptatem quo odio vitae dolor tenetur labore quia totam ipsum ad nulla amet quidem suscipit neque quam porro sunt.  
</div>
<div class="category cat-76">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore non eius voluptatem quo odio vitae dolor tenetur labore quia totam ipsum ad nulla amet quidem suscipit neque quam porro sunt.  
</div>
&#13;
&#13;
&#13;

在您的情况下,a[data-toggle].inline-link a相同。我用它来结合这两个事件。如果应该是,请将JS更改为:

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

});

&#13;
&#13;
$("a[data-toggle]").on("click", function (e) {
	    e.preventDefault(); // prevent navigating
	    var selector = $(this).data("toggle"); // get corresponding element
	    $(".category").hide();
	    $("."+selector).show();
	});
$('.inline-link a').click(function () {
	$('.inline-link a.active').removeClass('active');
   	$(this).addClass('active');

});
&#13;
.active {
  background: yellow;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="inline-link">
    <a href="#" data-toggle="cat-75">Category 75</a>
    <a href="#" data-toggle="cat-76">Category 76</a>
    <a href="#" data-toggle="cat-77">Category 77</a>
</div>

<div class="category cat-75">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore non eius voluptatem quo odio vitae dolor tenetur labore quia totam ipsum ad nulla amet quidem suscipit neque quam porro sunt.  
</div>
<div class="category cat-76">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore non eius voluptatem quo odio vitae dolor tenetur labore quia totam ipsum ad nulla amet quidem suscipit neque quam porro sunt.  
</div>
<div class="category cat-76">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore non eius voluptatem quo odio vitae dolor tenetur labore quia totam ipsum ad nulla amet quidem suscipit neque quam porro sunt.  
</div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

虽然@ Bh​​ojendraNepal 正确地指出了您的代码的主要问题是您错过了与<{1}}变量连接在一起的(。),我想再补充一点:你可能不需要使用两个不同的selector处理程序,一个就足够了。

<强> 段:

click
$('.category').hide();
$('.inline-link a').click(function () {
    $('.inline-link').find('a').removeClass('active');
    $(this).addClass('active');
    $('.category').hide();
    $('.'+$(this).data('toggle')).show();
});

希望这有帮助。