用jquery模仿的a的title屬性的例子,jquerytitle

來源:互聯網
上載者:User

用jquery模仿的a的title屬性的例子,jquerytitle

用jQuery實現的模仿a的title屬性的例子,在測試的時候ie6,7上出現了層次混亂,不過最終解決了。

html代碼如下:

<div class="wrap"><ul class="list clearfix"><li><a href="">UI設計師</a><div class="show"><p>所屬部門:技術部</p><p>工作地點:鄭州</p><p>招聘人數:21</p></div></li><li><a href="">前端開發工程師</a><div class="show"><p>所屬部門:技術部</p><p>工作地點:鄭州</p><p>招聘人數:21</p></div></li><li><a href="">營運工程師</a><div class="show"><p>所屬部門:技術部</p><p>工作地點:鄭州</p><p>招聘人數:21</p></div></li><li><a href="">研發開發工程師</a><div class="show"><p>所屬部門:技術部</p><p>工作地點:鄭州</p><p>招聘人數:21</p></div></li><li><a href="">UI設計師</a><div class="show"><p>所屬部門:技術部</p><p>工作地點:鄭州</p><p>招聘人數:21</p></div></li><li><a href="">前端開發工程師</a><div class="show"><p>所屬部門:技術部</p><p>工作地點:鄭州</p><p>招聘人數:21</p></div></li><li><a href="">營運工程師</a><div class="show"><p>所屬部門:技術部</p><p>工作地點:鄭州</p><p>招聘人數:21</p></div></li><li><a href="">研發開發工程師</a><div class="show"><p>所屬部門:技術部</p><p>工作地點:鄭州</p><p>招聘人數:21</p></div></li><li><a href="">UI設計師</a><div class="show"><p>所屬部門:技術部</p><p>工作地點:鄭州</p><p>招聘人數:21</p></div></li><li><a href="">前端開發工程師</a><div class="show"><p>所屬部門:技術部</p><p>工作地點:鄭州</p><p>招聘人數:21</p></div></li><li><a href="">營運工程師</a><div class="show"><p>所屬部門:技術部</p><p>工作地點:鄭州</p><p>招聘人數:21</p></div></li><li><a href="">研發開發工程師</a><div class="show"><p>所屬部門:技術部</p><p>工作地點:鄭州</p><p>招聘人數:21</p></div></li></ul></div>

css代碼如下

* {margin:0;padding:0;}body {font-size:12px;}.wrap {width:600px;margin:100px auto;}.clearfix:after, .clearfix:before {display:table;content: "";}.clearfix:after {clear:both;overflow: hidden;}.clearfix {zoom: 1;}.list {position:relative; //作為定位的父元素,li直接做父元素出現元素內容重疊問題}.list li {list-style:none;width:100px;height:24px;line-height:24px;margin-right:10px;float:left;}.list li a {text-decoration:none;color:#333;display:block;}.show {position:absolute;width:100px;background:#FFFFE1;border:1px solid #ffcc01;padding:6px;display:none;z-index:5;margin-top:10px; //代替topmargin-left:60px; //代替left}.show p {height:18px;line-height:18px;}.list li a:hover {text-decoration:underline;color:#FF0000;}

jQuery代碼如下:

<script type="text/javascript">$(function(){var $li=$(".wrap").find("li");$li.bind("mouseover",function(){$(this).find(".show").show(); }).bind("mouseout",function(){$(this).find(".show").hide();})})</script>

預覽效果;


jquery JS問題,點擊一個A,擷取了title屬性的值,在函數外怎取到這個值value

<script>var value; $(document).ready(function(){ $('ul li a').click(function() { value = $(this).attr("title");});}) if(value) alert(value) </script>
 
css a的title屬性

用程式實現迴圈就行了
如果說你是靜態頁還想保留title的話,
那就只有一個一個寫了
 

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.