切换与其内容Jquery的链接

Question

我有这段代码 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]匹配，但在我的代码中，它不起作用。

感谢您的帮助！

Answer 1

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

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

Answer 2

问题是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;

Answer 3

虽然@ 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();
});

希望这有帮助。