根据用户点击切换可见 div

Question

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

我还有另外 4 个 div。我一次只想显示 1 div，然后它们将根据用户选择的导航 LI's

进行切换

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

涉及的HTML/CSS/JS请看上面的jsfiddle。

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>

欢迎任何帮助，我仍在学习（我们不总是这样），所以对于任何 fixes/tips，请详细说明它为什么有效，或者我做错了什么导致它不起作用。（如果有道理！）

再次感谢您的帮助！

Answer 1

您不需要为每个菜单项设置单独的点击处理程序。 #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>

Answer 2

您可以尝试使用css在有onclick事件时显示和隐藏方块

这里有一些示例代码：

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 看看它是如何工作的

希望这对你有用！

Answer 3

这是实现它的一种方法。

HTML - 将 "navlink" class 添加到锚元素， ~~并为它们提供了一个数据部分属性，该属性指的是它们应该显示的选项卡~~:

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

Answer 4

您有一个语法错误，您不止一次关闭文档就绪回调。

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

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

当您删除这些额外的关闭选项卡出现。您可能还想在该文档就绪调用中隐藏除默认选项卡以外的所有选项卡。

根据用户点击切换可见 div

Switch visible div based on user click

javascript

css

jquery

hidden