Question

here is an example of what i need to achieve when i click on a <li> i want to change the tabs instead of clicking on <a> i need it for a reasons is there is a way to achieve that

<script>
   $(function() {
     $( "#tabs" ).tabs();

   });
   </script>

    <div id="tabs">
        <ul>
            <li name='tabs-1'>tab1</li>
            <li name='tabs-2'>tab2</li>
            <li name='tabs-3'>tab3</li>
        </ul>
        <div id="tabs-1">...</div>
        <div id="tabs-2">...</div>
        <div id="tabs-3">...</div>
    </div>

Answer 1

$(document).ready(function(){
    $('#myTab li:last').tab('show')
});

.nav-tabs li {
  margin:10px;
   padding:10px;
   backgroung-color:#c2c2c2;
   border-left:1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<ul class="nav nav-tabs" id="myTab">
			  <li class="active" data-target="#home" data-toggle="tab">Home</li>
			  <li data-target="#profile" data-toggle="tab">Profile</li>
			  <li data-target="#messages" data-toggle="tab">Messages</li>
			  <li data-target="#settings" data-toggle="tab">Settings</li>
			</ul>

			<div class="tab-content">
			  <div class="tab-pane active" id="home">Home</div>
			  <div class="tab-pane" id="profile">Profile</div>
			  <div class="tab-pane" id="messages">Message</div>
			  <div class="tab-pane" id="settings">Settings</div>
			</div>

希望以上解决方案符合您的要求

Answer 2

由于我了解您希望通过点击<li>而不是点击<a>来更改标签，这可能会有效：

$("li").on("click", function(){
    var tab_id = $(this).attr("name");
    $("#tabs div").each(function(){  //Hide all tabs
        $(this).hide();
    });
    $("#"+tab_id).show(); //Show tab
});

Answer 3

“a”标记是内联级别元素。没有内联级别元素可以设置其宽度。为什么？因为内联级别元素旨在表示流动文本，理论上它可以从一行换行到下一行。在那些类型的情况下，提供元素的宽度是没有意义的，因为你不一定知道它是否会包装。要设置其宽度，必须将其display属性更改为block或inline-block：

使用display：block;：

设置A的样式

#yourselector ul li a { display: block;}

如何使jquery.tabs采用<li>名称代替<a> href

3 个答案: