根据用户点击切换可见div

时间：2016-11-23 15:23:53

标签： javascript jquery css hidden

所以我有一个带有导航链接的div（使用ul / li和li中的href设置）。

下面我还有4个其他的div。我只想一次显示1个div，然后根据用户对导航LI的选择进行切换

我在不同的页面上使用了类似的设置，并尝试将其移植到我当前的页面但无济于事......

JSFIDDLE

请参阅上面的jsfiddle，了解HTML / CSS / JS。

HTML：

<div id="content">
        <div class="man-banner"></div>
        <div class="banner-nav" id="tabs">
            <ul class="tabs" style="padding-left: 0px">
                <li class="active"><a href="#wrapper#container#content#tab-content#home"><span>Home</span></a></li>
                <li><a href="#findvehicle" rel="find_your_vehicle"><span>Find Your Vehicle</span></a></li>
                <li><a href="#downloads" rel="downloads"><span>Downloads</span></a></li>
                <li><a href="#support" rel="support"><span>Support</span></a></li>
            </ul>
        </div>
        <div id="tab-content">
            <div id="home" class="tab_content">
            1234156124
            </div>
            <div id="findvehicle" class="tab_content">
            abasdjfniasjfnasdf
            </div>
            <div id="downloads" class="tab_content">
            asdfniadhnfiasdn890384834854854jnrjrjr
            </div>
            <div id="support" class="tab_content">
            asdfniadhTHIS IS SUPPORT
            </div>
        </div>
    </div>

欢迎任何帮助，我仍在学习（不是我们总是），所以对于任何修复/提示，请详细说明它的工作原理，或者我做错了什么使它无效。 （如果这是有道理的！）

再次感谢您的帮助！

4 个答案:

答案 0 :(得分：3)

这是实现目标的一种方式。

HTML - 已添加＆＃34; navlink＆＃34;类的锚元素，并为它们提供了一个数据部分属性，引用了它们应该显示的选项卡：

    <div id="content">
        <div class="banner-nav" id="tabs">
            <ul class="tabs" style="padding-left: 0px">
                <li><a href="#home"><span>Home</span></a></li>
                <li><a href="#findvehicle" rel="find_your_vehicle"><span>Find Your Vehicle</span></a></li>
                <li><a href="#downloads" rel="downloads"><span>Downloads</span></a></li>
                <li><a data-section="support" href="#support" rel="support"><span>Support</span></a></li>
            </ul>
        </div>
        <div id="tab-content">
            <div id="home" class="tab_content">
            1234156124
            </div>
            <div id="findvehicle" class="tab_content">
            abasdjfniasjfnasdf
            </div>
            <div id="downloads" class="tab_content">
            asdfniadhnfiasdn890384834854854jnrjrjr
            </div>
            <div id="support" class="tab_content">
            asdfniadhTHIS IS SUPPORT
            </div>
        </div>
    </div>

JavaScript - 请参阅内联评论：

$(document).ready(function(){
  // start of at the home page
  navigateTo("#home");

  // for every navlink element
  $('.tabs > li > a').each(function() {
    //when it is clicked
    $(this).click(function(e) {
      e.preventDefault();
      // navigate to the section ilinked to in the href
      navigateTo($(this).attr('href'));
    });
  });
});

function navigateTo(sectionId) {
  //hide all tabs
  $('.tab_content').hide();

  //then show the one we want
  $(sectionId).show();
}

答案 1 :(得分：0)

每个菜单项不需要单独的点击处理程序。 #tabs li点击处理程序就足够了。我删除了每个链接上的点击处理程序，因为它们不是必需的。

$("#tabs li").click(function() {
  //  First remove class "active" from currently active tab
  $("#tabs li").removeClass('active selected');

  //  Now add class "active" to the selected/clicked tab
  $(this).addClass("active selected");

  //  Hide all tab content
  $(".tab_content").hide();

  //  Here we get the href value of the selected tab
  var selected_tab = $(this).find("a").attr("href");

  //  Show the selected tab content
  $(selected_tab).fadeIn(0);

  //  At the end, we add return false so that the click on the link is not executed
  return false;
});
ul {
  list-style: none;
}
.man-banner {
  background: url("../images/man-logo.png") no-repeat top;
  border-radius: 8px 8px 0 0;
  height: 93px;
  max-width: 915px;
  margin: 15px 15px 0 15px;
}
.banner-nav {
  background: #F0F1F2;
  border-bottom: 1px solid #D6D8DB;
  height: 40px;
  max-width: 915px;
  margin: 0 15px 15px;
}
.banner-nav a {
  font-family: MAN-light, Arial, sans-serif;
  font-size: 16px;
  margin-left: 20px;
  text-decoration: none;
  display: block;
  float: left;
  height: 40px;
  position: relative;
  color: #303C49;
  line-height: 40px;
}
.banner-nav a:hover {
  color: #303C49;
}
.banner-nav a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 5;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.banner-nav a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
ul.tabs li.selected a,
ul.tabs li.selected a:hover {
  top: 0px;
  font-weight: normal;
  background: #FFF;
  border-bottom: 1px solid #FFF;
  color: #000;
}
/***************************/

/**  Main Content Area  **/

/***************************/

#content {
  width: 950px;
  margin: 5 10;
  overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <div class="man-banner"></div>
  <div class="banner-nav" id="tabs">
    <ul class="tabs" style="padding-left: 0px">
      <li class="active"><a data-tab-id="#home"><span>Home</span></a>
      </li>
      <li><a href="#findvehicle" rel="find_your_vehicle"><span>Find Your Vehicle</span></a>
      </li>
      <li><a href="#downloads" rel="downloads"><span>Downloads</span></a>
      </li>
      <li><a href="#support" rel="support"><span>Support</span></a>
      </li>
    </ul>
  </div>
  <div id="tab-content">
    <div id="home" class="tab_content">
      1234156124
    </div>
    <div id="findvehicle" class="tab_content">
      abasdjfniasjfnasdf
    </div>
    <div id="downloads" class="tab_content">
      asdfniadhnfiasdn890384834854854jnrjrjr
    </div>
    <div id="support" class="tab_content">
      asdfniadhTHIS IS SUPPORT
    </div>
  </div>
</div>

答案 2 :(得分：0)

当有onclick事件时，您可以尝试使用css来显示和隐藏块。

这里有一些示例代码：

<强> CSS 

.activetab {
    display: block;
}

.tab {
    display: none;
}

JAVASCRIPT / JQUERY 

$(document).ready(function() {
    $(".tabmenu").on("click", function() {
        $(".activetab").removeClass("activetab");
        $(this).addClass("activetab");
    });
});

<强> HTML 

<div id="content">
    <div class="man-banner"></div>
    <div class="banner-nav" id="tabs">
        <ul class="tabs" style="padding-left: 0px">
            <li class="active tabmenu"><a href="#wrapper#container#content#tab-content#home"><span>Home</span></a></li>
            <li class="tabmenu"><a href="#findvehicle" rel="find_your_vehicle"><span>Find Your Vehicle</span></a></li>
            <li class="tabmenu"><a href="#downloads" rel="downloads"><span>Downloads</span></a></li>
            <li class="tabmenu"><a href="#support" rel="support"><span>Support</span></a></li>
        </ul>
    </div>
    <div id="tab-content">
        <div id="home" class="tab_content tab">
        1234156124
        </div>
        <div id="findvehicle" class="tab_content tab">
        abasdjfniasjfnasdf
        </div>
        <div id="downloads" class="tab_content tab">
        asdfniadhnfiasdn890384834854854jnrjrjr
        </div>
        <div id="support" class="tab_content tab">
        asdfniadhTHIS IS SUPPORT
        </div>
    </div>
</div>

如果你想我可以创建一个JSFiddle来看它是如何工作的

希望这适合你！

答案 3 :(得分：0)

您遇到语法错误，您将多次关闭文档就绪回调。

$("#findvehicle").click(function(){
        $('a[rel="find_your_vehicle"]').trigger("click");
    });
}); // Remove this

    $("#downloads").click(function(){
        $('a[rel="downloads"]').trigger("click");
    });
}); // Remove this

当您删除这些额外关闭时，会显示标签。您可能还希望隐藏该文档就绪调用中的所有默认选项卡。

相关问题
最新问题