显示/隐藏具有基于数据属性的id的div(onclick)

时间:2014-11-27 21:45:33

标签: javascript jquery html css

我有以下列表:

<ul>
    <li><a href="" class="active" data-related="main">Main</a></li>
    <li><a href="" data-related="title_1">Title 1</a></li>
    <li><a href="" data-related="title_2">Title 2</a></li>
    <li><a href="" data-related="title_3">Title 3</a></li>
    <li><a href="" data-related="title_4">Title 4</a></li>
</ul>

以下div结构:

<div id="main">... Content ...</div>
<div id="title_1">... Content ...</div>
<div id="title_2">... Content ...</div>
<div id="title_3">... Content ...</div>
<div id="title_4">... Content ...</div>

一开始所有div都可见。 (因为Google和没有JS的用户)

如果页面已加载,则应隐藏除主div之外的所有页面。如果我点击带有数据属性“title_1”的导航点,相关的div应该是可见的,主div也应该被隐藏。此类活动应该跳转到新的活动导航点。 :)

这可能吗?我不知道如何解决这个问题。

感谢您的帮助!

3 个答案:

答案 0 :(得分:5)

您可以在ul li中的元素上使用click事件并获取属性data-related。然后你可以使用它并找到id与data-related相同的div并切换(隐藏/显示或其他任何东西):

$("ul li a").on("click", function() {
  $("div[id=" + $(this).attr("data-related") + "]").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#" class="active" data-related="main">Main</a>

  </li>
  <li><a href="#" data-related="title_1">Title 1</a>

  </li>
  <li><a href="#" data-related="title_2">Title 2</a>

  </li>
  <li><a href="#" data-related="title_3">Title 3</a>

  </li>
  <li><a href="#" data-related="title_4">Title 4</a>

  </li>
</ul>
<div id="main">... Content ...</div>
<div id="title_1">... Content ...</div>
<div id="title_2">... Content ...</div>
<div id="title_3">... Content ...</div>
<div id="title_4">... Content ...</div>

addClass / removeClass的另一个例子:

$("ul li a").on("click", function() {
  $("div").removeClass("activeLnk");
  $("div[id=" + $(this).attr("data-related") + "]").addClass("activeLnk");
});
.activeLnk {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#" class="active" data-related="main">Main</a>

  </li>
  <li><a href="#" data-related="title_1">Title 1</a>

  </li>
  <li><a href="#" data-related="title_2">Title 2</a>

  </li>
  <li><a href="#" data-related="title_3">Title 3</a>

  </li>
  <li><a href="#" data-related="title_4">Title 4</a>

  </li>
</ul>
<div id="main">... Content ...</div>
<div id="title_1">... Content ...</div>
<div id="title_2">... Content ...</div>
<div id="title_3">... Content ...</div>
<div id="title_4">... Content ...</div>

答案 1 :(得分:4)

您可以将ID与data-attr匹配,如下所示:

$("div").each(function(){
     $(this).hide();
    if($(this).attr('id') == 'main') {
        $(this).show();
    }
});

$('a').on( "click", function(e) {
    e.preventDefault();
    var id = $(this).attr('data-related'); 
    $("div").each(function(){
        $(this).hide();
        if($(this).attr('id') == id) {
            $(this).show();
        }
    });
});

<强> http://jsfiddle.net/mcko06ht/

答案 2 :(得分:2)

在此html代码中添加一个类:

<div id="main" class="tab">... Content ...</div>
<div id="title_1" class="tab">... Content ...</div>
<div id="title_2" class="tab">... Content ...</div>
<div id="title_3" class="tab">... Content ...</div>
<div id="title_4" class="tab">... Content ...</div>

将它放在脚本标记中:

$('ul a').click(function(e){
            $('ul li').removeClass('actif');
            $(this).find('li').addClass('actif');
            $('.tab').hide();
            $('#'+$(this).attr('data-related')).show();
           //This is also valid
           //$('#'+$(this).data('related')).show();
            e.preventDefault();
});