我需要你的幫助。如何使用css加入我的列表和div?
我試圖找出解決辦法,讓我的李與我的div整齊地連接在一起。我附上了一個問題的例子以及期望的結果。也許有一些CSS的技巧,但我不是靠近那些熟練的人自己弄清楚這一點,只是看到它已在一些網站上完成。
window.onload = function() {
$("#list li").click(function(){
var $li = $(this);
var selector = $li.data("show"); // => "#item1"
$('.item').addClass('hidden');
$('ul').children().removeClass('selected');
$(selector).removeClass("hidden"); //but show matching item
$(this).addClass("selected"); //but show matching item
alert($(this).attr("class").split(' '))
});
$("#list li").eq(0).click();
}
* {
font-family: Segoe UI;
font-size: 9pt;
}
#container {
bottom: 0; left: 0; top: 0; right: 0;
margin: auto;
position: absolute;
width: 900px;
height: 600px;
}
#list {
list-style-type: none;
padding: 0;
margin: 0;
}
#list li {
margin:0 0 10px 0;
background: #FFF;
padding: 10px;
cursor: pointer;
color: rgb(149,149,149);
font-size: 11pt;
}
.item {
width: 100%;
height: 100%;
border: 1px solid red;
}
#menu {
float: left;
width: 25%;
height: 100%;
}
#content {
float: left;
width: 75%;
background-color: rgb(238,238,238);
height: 100%;
}
.hidden{ display:none; }
#list li.selected {
color: rgb(149,149,149);
border-top: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
}
.selected {
background: rgb(238,238,238) !important;
color: rgb(51,51,51) !important;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
<div id="menu">
<ul id="list">
<li data-show="#item1">File Information</li>
<li data-show="#item2">My Summary</li>
<li data-show="#item3">Comments</li>
</ul>
</div>
<div id="content">
<div id="item1" class="hidden item">FILE INFORMATION</div>
<div id="item2" class="hidden item">MY SUMMARY</div>
<div id="item3" class="hidden item">COMMENTS</div>
</div>
</div>
完美無瑕的工作!我會盡我所能接受!非常感謝! – BobbyJones
歡迎您:) –
此解決方案似乎隱藏在「活動」之下的標籤。有沒有辦法解決這個問題? – Chris