Bootstrap 面板及导航结合的各种坑

最新推荐文章于 2024-12-04 00:47:06 发布

原创最新推荐文章于 2024-12-04 00:47:06 发布 · 212 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #javascript

本文详细描述了一位开发者如何修复Bootstrap导航中点击多次不还原导航条的问题，涉及JavaScript代码和CSS调整，提供了实用的解决方案。

Bootstrap 面板及导航结合的各种坑

问题描述：点击导航三再次点击不还原到导航一，纠结了好久，最后终于搞定，不会css还是很麻烦的，这里提供一个比较老实的方法

<script type="text/javascript">
	// 查看  
	  function showQuery(id,times,metro_INFO,instore_DATE){
      		$('#myQueryTabBLabel').text(metroId +'-'+ times +'记录'); // 标题
      		loadQueryLabel(fid,times)
	  }
	  // 调整
	  function loadQueryLabel(fid, times) {
	  		// 去除所有li的选中属性 一开始是指定但发现active的属性去掉了但是导航不改变
		 $('#myQueryTabB li').each(function(e){
			  var self = $(this)
			   self.removeAttr("class","active") 
		  })
		  // 选中Li标签第一个class 复制active
		 $('#myQueryTabB li:first').attr("class","active") 
		 
		 // 导航内元素 标签内容进行点击重置
		  $('#myTab2Content div').each(function(e){
			  var self = $(this) // tab-pane fade in active
			  self.attr("class","tab-pane fade") 
		  }) 
		  // 导航内元素 第一个导航选中
		  $('#myQueryTabBContent div:first').attr("class","tab-pane fade in active") 
		  
		  $('#myQueryTabB a').each(function () {
			var self = $(this)
			// self[0].innerHTML 标签名称/标题  self[0].parentNode.className 值是 active
			loadQueryDisplay(fid,times,self[0].innerHTML,self[0].parentNode.className)
		})
		// 延迟加载，DOM树加载完再显示
     	setTimeout( function(){
     		 $('#myQueryTabB').modal('toggle')
    		 $('#myQueryTabB').modal('show') 
     	}, 500 );
	 }
	 function loadQueryDisplay(fid,times, activeTab, className) {
		 if (activeTab.includes("封面")) {
				url = "/media/monthABRepair/RepairCoverB.jsp?fid="+fid+"&ftimes="+ftimes; 
     		document.getElementById("iframe-QueryIdB").src = url;
			} else
			if (activeTab.includes("记录单1")) {
				url = "/rtoms/media/monthABRepair/RepairQueryRecord1.jsp?fid="+fid+"&ftimes="+ftimes; 
     		document.getElementById("iframe-QueryIdB1").src = url;
			}else if(activeTab.includes("记录单2") && className == "active"){
				url = "/media/monthABRepair/RepairRecord8.jsp?fid="+fid+"&flag="+flag+"&ftimes="+ftimes+"&instoredate="+instoredate+"&metroId="+metroId;
     		document.getElementById("iframe-QueryIdB2").src = url;
			} 
			......
	}
	
</script>

	<div class="modal fade" id="myQueryTabB" tabindex="-1" role="dialog" aria-labelledby="myQueryTabB" aria-hidden="true">
		<div class="modal-dialog" style="width: 1100px">
			<div class="modal-content"  >
			  <div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
					</button>
					<h4 class="modal-title" id="myQueryTabBLabel">
						
					</h4>
				</div>
			   <div class="modal-body" >
			     	
				   <ul id="myTab4" class="nav nav-pills">
					<li class="active"> 
						<a href="#QueryB" data-toggle="tab">封面</a>
					</li>
					<li>
					   <a href="#QueryB1" data-toggle="tab">记录单1</a>
					</li>
					<li>
					   <a href="#QueryB2" data-toggle="tab">记录单2</a>
					</li>
					<li>
					   <a href="#QueryB3" data-toggle="tab">记录单3</a>
					</li>
				   </ul>
				    
				    <!--Atab标签结束  -->
				    <div id="myQueryTabBContent" class="tab-content">
				       
				       <div class="tab-pane fade in active" id="QueryB">
							<iframe src=''
				            name="cont_box" frameborder="0" marginheight="0" id="iframe-QueryIdB"
				            width="100%" height="700"></iframe>
				            
						</div>
						
						<div class="tab-pane fade in active" id="QueryB1">
							<iframe src=''
				            name="cont_box" frameborder="0" marginheight="0" id="iframe-QueryIdB1"
				            width="100%" height="700"></iframe>
				            
						</div>
						
						<div class="tab-pane fade" id="QueryB2">
							<iframe src=""
				            name="cont_box" frameborder="0" marginheight="0" id="iframe-QueryIdB2"
				            width="100%" height="700"></iframe>
						</div>
					
						 <div class="tab-pane fade" id="QueryB3">
							<iframe src=""
				            name="cont_box" frameborder="0" marginheight="0" id="iframe-QueryIdB5"
				             width="100%" height="700"></iframe>
						 </div> 
				
				    </div>
			   </div>
			</div>
		</div>
	</div>