单击链接时显示div内容

时间：2016-10-21 09:10:51

标签： javascript

当我点击链接时，内容未显示我需要帮助我不善于使用javascript和jquery任何帮助都将受到高度赞赏，因为我被困在这里

＆＃13;
＆＃13; 
$(document).ready(function() {
  $('.nav-collapse sidebar-nav ul li:first').addClass('active');
  $('.tab-content').hide();
  $('.nav-collapse sidebar-nav ul li submenu.a').click(function(event) {
    event.preventDefault();
    var cont = $(this).attr('href');
    $(this).parent().addClass('active');
    $(this).parent().siblings().removeClass('active');
    $(cont).show();
    $(cont).siblings('.tab-content').hide();
  });
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="nav-collapse sidebar-nav">
  <ul>
    <li>
      <a class="dropmenu" href="#"><i class="icon-folder-close-alt"></i><span class="hidden-tablet"> ACSA</span><span class="label label-important"> 3 </span></a>
      <ul>
        <li>
          <a class="dropmenu" href="#"><i class="icon-folder-close-alt"></i><span class="hidden-tablet"> CABINETS</span><span class="label label-important"> 1 </span></a>
          <ul>
            <li>
              <a class="dropmenu" href="#"><i class="icon-folder-close-alt"></i><span class="hidden-tablet"> CORE</span><span class="label label-important"> 2 </span></a>
              <ul>

                <li><a class="submenu" href="#cabinet1"><i class="icon-file-alt"></i><span class="hidden-tablet"> Cabinet 1</span></a>
                </li>
                <li><a class="submenu" href="#cabinet2"><i class="icon-file-alt"></i><span class="hidden-tablet"> Cabinet 2</span></a>
                </li>

              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

<div id="content">
  <div id="cabinet1" class="tab-content">
    <div class="wrap">
      <h5>CABINET 1  core A</h5>
      <div class="gauges">
        <h1> Cabinet 1  Core A Power usage</h1>
        <p>Power</p>

      </div>
      <div class="gauges">
        <h1> Cabinet 1 core A Current </h1>
      </div>
      <div class="gauges">
        <h1> Cabinet 1 core A Voltage </h1>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

代码不完整，但当您点击链接时，它不显示div选项卡上的内容 - 内容

3 个答案:

答案 0 :(得分：2)

尝试将您的选择器修改为此选项：

$('.nav-collapse.sidebar-nav ul li a.submenu')
  1. 我删除了.nav-collapse.sidebar-nav个类之间的空格 因为他们处于同一水平。
  2. 我重新排序a.submenu选择器， 因为.表示一个类，它应该在submenu附近 a元素

答案 1 :(得分：0)

所以我整理了一下，但是从代码中你应该能够了解最新情况。

基本上在文档就绪时你就隐藏了div。这也导致点击问题，并且通过CSS和Hrefs进行定位有点偏离所以我用数据属性设置了

如果有任何问题，请告诉我。看到它在这里工作 http://codepen.io/unifx/pen/rrowZz 

$(document).ready(function () {
    $('ul.dropmenu li:first').addClass('active');

    $('ul.submenu li a').click( function(){
      var i = $(this).attr('data-content');
      $('.tab-content').removeClass('show');
      $('#cabinet'+i).addClass('show');
    });
});

<强> CSS 

.hidden {
  display: none;
}
.show {
  display: block;
}

<强> HTML 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="nav-collapse sidebar-nav">
  <ul class="dropmenu">
    <li>
      <a class="" href="#"><i class="icon-folder-close-alt"></i><span class="hidden-tablet"> ACSA</span><span class="label label-important"> 3 </span></a>
      <ul>
        <li>
          <a class="dropmenu" href="#"><i class="icon-folder-close-alt"></i><span class="hidden-tablet"> CABINETS</span><span class="label label-important"> 1 </span></a>
          <ul class="submenu">
            <li>
              <a class="dropmenu" href="#"><i class="icon-folder-close-alt"></i><span class="hidden-tablet"> CORE</span><span class="label label-important"> 2 </span></a>
              <ul>

                <li><a class="submenu" href="#" data-content="1"><i class="icon-file-alt"></i><span class="hidden-tablet"> Cabinet 1</span></a>
                </li>
                <li><a class="submenu" href="#" data-content="2"><i class="icon-file-alt"></i><span class="hidden-tablet"> Cabinet 2</span></a>
                </li>

              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

<div id="content">
  <div id="cabinet1" class="tab-content hidden">
    <div class="wrap">
      <h5>CABINET 1  core A</h5>
      <div class="gauges">
        <h1> Cabinet 1  Core A Power usage</h1>
        <p>Power</p>

      </div>
      <div class="gauges">
        <h1> Cabinet 1 core A Current </h1>
      </div>
      <div class="gauges">
        <h1> Cabinet 1 core A Voltage </h1>
      </div>
    </div>
  </div>
  <div id="cabinet2" class="tab-content hidden">
    <div class="wrap">
      <h5>CABINET 2 core A</h5>
      <div class="gauges">
        <h1> Cabinet 2 Core A Power usage</h1>
        <p>Power</p>

      </div>
      <div class="gauges">
        <h1> Cabinet 2 core A Current </h1>
      </div>
      <div class="gauges">
        <h1> Cabinet 2 core A Voltage </h1>
      </div>
    </div>
  </div>
</div>

答案 2 :(得分：0)

<div class="nav-collapse sidebar-nav">
    <ul>
        <li>
            <a class="dropmenu" href="#">
                <i class="icon-folder-close-alt"></i>
                <span class="hidden-tablet"> ACSA</span>
                <span class="label label-important"> 3 </span>
            </a>
            <ul>
                <li>
                    <a class="dropmenu" href="#">
                        <i class="icon-folder-close-alt"></i>
                        <span class="hidden-tablet"> CABINETS</span>
                        <span class="label label-important"> 1 </span>
                    </a>
                    <ul>
                        <li>
                            <a class="dropmenu" href="#">
                                <i class="icon-folder-close-alt"></i>
                                <span class="hidden-tablet"> CORE</span>
                                <span class="label label-important"> 2 </span>
                            </a>
                            <ul>
                                <li>
                                    <a class="submenu" href="#cabinet1">
                                        <i class="icon-file-alt"></i>
                                        <span class="hidden-tablet"> Cabinet 1</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="submenu" href="#cabinet2">
                                        <i class="icon-file-alt"></i>
                                        <span class="hidden-tablet"> Cabinet 2</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

<div id="content">
    <div id="cabinet1" class="tab-content">
        <div class="wrap">
            <h5>CABINET 1  core A</h5>
            <div class="gauges">
                <h1> Cabinet 1  Core A Power usage</h1>
                <p>Power</p>

            </div>
            <div class="gauges">
                <h1> Cabinet 1 core A Current </h1>
            </div>
            <div class="gauges">
                <h1> Cabinet 1 core A Voltage </h1>
            </div>
        </div>
    </div>

    <div id="cabinet2" class="tab-content">
        <div class="wrap">
            <h5>CABINET 2 core A</h5>
            <div class="gauges">
                <h1> Cabinet 2  Core A Power usage</h1>
                <p>Power</p>

            </div>
            <div class="gauges">
                <h1> Cabinet 2 core A Current </h1>
            </div>
            <div class="gauges">
                <h1> Cabinet 2 core A Voltage </h1>
            </div>
        </div>
    </div>
</div>

AND CSS 

    $(document).ready(function() {
  $('.nav-collapse.sidebar-nav ul li:first').addClass('active');
  $('.tab-content').hide();
  $('.nav-collapse.sidebar-nav ul li a.submenu').click(function(event) {
    event.preventDefault();
    var cont = $(this).attr('href');
    $(this).parent().addClass('active');
    $(this).parent().siblings().removeClass('active');
    $(cont).show();
    $(cont).siblings('.tab-content').hide();
  });
});
相关问题
最新问题