Question

我想有一个显示/隐藏链接列表，显示div占用相同的空间，并能够响应。我的列表显示在左侧，显示右侧的内容。我的想法是，当我点击链接1时，内容＃1将显示，当我点击链接2时，内容＃1将消失，内容＃2将取消它的位置。

当在小屏幕和移动屏幕上加载页面时，我希望在点击链接1时显示内容＃1，内容1将链接2按下。依此类推，内容＃2出现在Link 2下，并推动链接3向下......

我正在使用自己的主题开发Wordpress和Bootstrap。我不拒绝使用.php文件来实现这一点。到目前为止，我已经在html，css和js中尝试了这个。由于我在试图获得这种反应时遇到困难，如果有必要，我愿意接受一种不同的方法。但我希望能够从Wordpress填充内容和链接名称。

这是我的初始代码

$(function () {
  $("a[id^='link']").click(function (e) {
    e.preventDefault();
    var index = this.id.replace("link", "");
    $(".panel").hide();
    $("#panel" + index).show();
  });
});

.side-nav {
  font-size: calc(18px + 3vw);
}

.panel {
  font-size: calc(18px + 1vw);
  display: none;
  position:absolute;
  top: 0px;
  right: 0px;
  width: 70%;
}

<div id="side-nav-container">

  <div class="side-nav">
    <a id="link1 " href="# ">Link 1</a>
    <a id="link2 " href="# ">Link 2>/a>
  </div>

  <div id="side-nav-content">
    <div id="panel1 " class="panel ">Content 1</div>
    <div id="panel2 " class="panel ">Content 2</div>
  </div>

</div>

新代码

$('#myTabs a').click(function(e) {
  e.preventDefault()
  $(this).tab('show')
})

.tab-content {
  font-size: calc(12px + .99vw);
}

.nav-tab-list {
  font-size: calc(18px + 1vw);
}

<div class="container">
  <div class="row">
    <div class="nav-tab-list col-lg-6 col-md-5 col-xs-12">
      <ul class="nav nav-stacked" role="tablist">
        <li class="active" role="presentation"><a role="tab" href="#home" aria-controls="home" data-toggle="tab">Home</a></li>
        <li role="presentation"><a role="tab" href="#profile" aria-controls="profile" data-toggle="tab">Profile</a></li>
        <li role="presentation"><a role="tab" href="#messages" aria-controls="messages" data-toggle="tab">Messages</a></li>
        <li role="presentation"><a role="tab" href="#settings" aria-controls="settings" data-toggle="tab">Settings</a></li>
      </ul>
    </div>

    <div class="col-lg-6 col-md-5 col-xs-12">
      <div class="tab-content">
        <div id="home" class="tab-pane active" role="tabpanel">Bonjour</div>
        <div id="profile" class="tab-pane" role="tabpanel">Hello</div>
        <div id="messages" class="tab-pane" role="tabpanel">Au revoir</div>
        <div id="settings" class="tab-pane" role="tabpanel">Goodbye</div>
      </div>
    </div>
  </div>
</div>

在Wordpress上响应显示/隐藏链接

0 个答案: