Question

我是使用jQuery的新手，我对静态网站的第一个更大改进是jQuery选项卡，让我可以在侧边栏和顶部栏菜单上切换主页div。我似乎无法让脚本与每个nav类元素一起使用。截至目前，它正在研究所述元素：Poradnik 1,2,3,4，我也希望他们能够在Stronagłówna，Spistreści，Poradniki和O autorze上工作。基本上所有位于nav下的元素。我应该改变什么？任何人都可以帮我解决这个问题吗？谢谢。

下面我将列出所需元素的代码。

openssl connect

$(document).ready(function(){
	
	$('ul.nav ul li').click(function(){
		var tab_id = $(this).attr('data-tab');

		$('ul.nav ul li').removeClass('current');
		$('.tab-content').removeClass('current');

		$(this).addClass('current');
		$("#"+tab_id).addClass('current');
	})	
})

.tab-content{
	display: none;
	padding: 15px;
}

.tab-content.current{
	display: inherit;
}
.topmenu {
	width: 875px;
	display: block;
	position: relative;
	float: left;
	height: 90px;
	font-size: 20px;
}
.topmenu ul {
	padding: 25px;
}
.topmenu ul.nav a, ul.nav a:visited {
	display: block;
	width: 120px;
	height: 25px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	text-align: center;
	padding: 5px;
}
.topmenu ul.nav li a:hover { 
	width: 120px;  
	height: 25px;
	background: #D2E2FF;
	color: #000;
	border: 1px solid black;
	padding-top: 4px;
	padding-right: 4px;
	padding-bottom: 8px;
	padding-left: 4px;
}

.topmenu ul.nav li:hover ul {
	left: 0px;
	top: 38px;
	padding: 0px;
	border:solid 1px;
}
.topmenu ul.nav li:hover ul li a {
	padding: 6px;
	width: 250px;
	background-color: #FFFFFF;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #000;
	border-right-color: #000;
	border-bottom-color: #000;
	border-left-color: #000;
	border-right-style: none;
	border-left-style: none;
}

ul.nav {
	list-style: none; 
	margin-bottom: 15px;
}
ul.nav li {
float:left;
}
ul.nav a, ul.nav a:visited { 
	display: block; 
	width: 25px;
	height: 25px;
	text-decoration: none;
	background-color: #FFFFFF;
	padding: 3px;
}

ul.nav li a:hover { 
	background-color: #D2E2FF;
	color: #000;
	border: solid 1px black;
	padding: 2px;
}

ul.nav ul a:hover { 
	background-color: #D2E2FF;
	color: #000;
	padding: 3px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

ul.nav li a:focus, ul.nav li a:active {
	color: #000;
	text-decoration: underline;
}

ul.nav ul {
	position: absolute;
	left: -9999px;
	top: -9999px;
	list-style-type: none;
}
ul.nav li:hover {
	position: relative;
}

ul.nav li:hover ul {
	left: 30px;
	top: 0px;
	padding: 0px;
	border: solid 1px;
}

ul.nav li:hover ul li a {
	padding: 3px;
	width:300px;
	background-color: #FFFFFF;
}

ul.nav li:hover ul li a:hover {
	background: #D2E2FF;
	color: #000;
}

Answer 1

选择其他li如下：

$(document).ready(function(){

    $('ul.nav li').click(function(){
        var tab_id = $(this).attr('data-tab');
        if(typeof(tab_id) != 'undefined'){  
            $('ul.nav li').removeClass('current');
            $('.tab-content').removeClass('current');

            $(this).addClass('current');
            $("#"+tab_id).addClass('current');
        }      
    })  
})

只需在HTML中链接jquery选择器即可。

演示小提琴。 http://jsfiddle.net/6y7z1Lmq/1/

Answer 2

现在应该可以了。问题是，当您点击其中一个内部<li>时，您也会点击其中一个外部 <li>＆＃39。要避免这种情况，请使用此JQuery / JavaScript函数：

$(document).ready(function() {
  $('ul.nav li:not(.innerNav)').click(function() {
    var tab_id = $(this).attr('data-tab');
    $('.ul.nav > li').removeClass('current');
    $('.tab-content').removeClass('current');
    $(this).addClass('current');
    $("#" + tab_id).addClass('current');
  });
});

并向<li>内部<ul>提供课程innerNav。

＆＃13;

$(document).ready(function() {
  $('ul.nav li:not(.innerNav)').click(function() {
    var tab_id = $(this).attr('data-tab');
    $('.ul.nav > li').removeClass('current');
    $('.tab-content').removeClass('current');
    $(this).addClass('current');
    $("#" + tab_id).addClass('current');
  });
});

＆＃13;

.tab-content {
  display: none;
  padding: 15px;
}
.tab-content.current {
  display: inherit;
}
.topmenu {
  width: 875px;
  display: block;
  position: relative;
  float: left;
  height: 90px;
  font-size: 20px;
}
.topmenu ul {
  padding: 25px;
}
.topmenu ul.nav a, ul.nav a:visited {
  display: block;
  width: 120px;
  height: 25px;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  text-align: center;
  padding: 5px;
}
.topmenu ul.nav li a:hover {
  width: 120px;
  height: 25px;
  background: #D2E2FF;
  color: #000;
  border: 1px solid black;
  padding-top: 4px;
  padding-right: 4px;
  padding-bottom: 8px;
  padding-left: 4px;
}
.topmenu ul.nav li:hover ul {
  left: 0px;
  top: 38px;
  padding: 0px;
  border: solid 1px;
}
.topmenu ul.nav li:hover ul li a {
  padding: 6px;
  width: 250px;
  background-color: #FFFFFF;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-bottom-style: solid;
  border-top-color: #000;
  border-right-color: #000;
  border-bottom-color: #000;
  border-left-color: #000;
  border-right-style: none;
  border-left-style: none;
}
ul.nav {
  list-style: none;
  margin-bottom: 15px;
}
ul.nav li {
  float: left;
}
ul.nav a, ul.nav a:visited {
  display: block;
  width: 25px;
  height: 25px;
  text-decoration: none;
  background-color: #FFFFFF;
  padding: 3px;
}
ul.nav li a:hover {
  background-color: #D2E2FF;
  color: #000;
  border: solid 1px black;
  padding: 2px;
}
ul.nav ul a:hover {
  background-color: #D2E2FF;
  color: #000;
  padding: 3px;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
}
ul.nav li a:focus, ul.nav li a:active {
  color: #000;
  text-decoration: underline;
}
ul.nav ul {
  position: absolute;
  left: -9999px;
  top: -9999px;
  list-style-type: none;
}
ul.nav li:hover {
  position: relative;
}
ul.nav li:hover ul {
  left: 30px;
  top: 0px;
  padding: 0px;
  border: solid 1px;
}
ul.nav li:hover ul li a {
  padding: 3px;
  width: 300px;
  background-color: #FFFFFF;
}
ul.nav li:hover ul li a:hover {
  background: #D2E2FF;
  color: #000;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
  </script>
  <title></title>
</head>
<body>
  <div class="topmenu">
    <ul class="nav">
      <li class="tab-link current" data-tab="strona_glowna">
        <a href="#">Strona główna</a>
      </li>
      <li class="tab-link" data-tab="spis_tresci">
        <a href="#">Spis treści</a>
      </li>
      <li class="innerNav">
        <a href="#">Poradniki</a>
        <ul>
          <li class="tab-link" data-tab="poradnik_1">
            <a href="#">Poradnik 1</a>
          </li>
          <li class="tab-link" data-tab="poradnik_2">
            <a href="#">Poradnik 2</a>
          </li>
          <li class="tab-link" data-tab="poradnik_3">
            <a href="#">Poradnik 3</a>
          </li>
          <li class="tab-link" data-tab="poradnik_4">
            <a href="#">Poradnik 4</a>
          </li>
        </ul>
      </li>
      <li class="tab-link" data-tab="o_autorze">
        <a href="#">O autorze</a>
      </li>
    </ul>
  </div>
  <div class="tab-content current" id="strona_glowna">
    <h1>Strona główna</h1>
    <p>Strona główna</p>
  </div>
  <div class="tab-content" id="spis_tresci">
    <h1>Spis treści</h1>
    <p>Spis treści</p>
  </div>
  <div class="tab-content" id="poradnik_1">
    <h1>Poradnik 1</h1>
    <p>Poradnik 1</p>
  </div>
  <div class="tab-content" id="poradnik_2">
    <h1>Poradnik 2</h1>
    <p>Poradnik 2</p>
  </div>
  <div class="tab-content" id="poradnik_3">
    <h1>Poradnik 3</h1>
    <p>Poradnik 3</p>
  </div>
  <div class="tab-content" id="poradnik_4">
    <h1>Poradnik 4</h1>
    <p>Poradnik 4</p>
  </div>
  <div class="tab-content" id="o_autorze">
    <h1>O autorze</h1>
    <p>O autorze</p>
  </div>
</body>
</html>

＆＃13;

jQuery选项卡 - 选择所有菜单ul元素

2 个答案: