Question

我希望在我的缩略图滑块div之后显示我的文字，我的活动滑块类：“@IBAction func btnFacebookPressed(_ sender: Any) { let loginManager = FBSDKLoginManager() loginManager.loginBehavior = FBSDKLoginBehavior.browser; loginManager.logIn(withReadPermissions: ["email"], from: self, handler: {(result : FBSDKLoginManagerLoginResult?, error : Error?) -> Void in if error != nil { // Process error } else if (result?.isCancelled)! { // Handle cancellations } else if (result?.grantedPermissions.contains("email"))! { print("result is: \(result)"); self.fetchUserInfo() loginManager.logOut() } }) } func fetchUserInfo() { if let accessToken = FBSDKAccessToken.current()?.tokenString { print("Token is available : \(accessToken)") FBSDKGraphRequest(graphPath: "me", parameters: ["fields": "id, name, link, first_name, last_name, picture.type(large), email, birthday, bio ,location , friends ,hometown , friendlists"]).start(completionHandler: { (connection : FBSDKGraphRequestConnection?, result : Any?, error : Error?) in if let error = error { print("Error \(error)") } else if let result = result { print("result:\(result)") } }) } }” 我的缩略图ID：“拇指” 我想在活动时自动在#thumbs div下方显示文字我试过这个CSS，但没有用，

$(document).on('click', '#editNominHref', function(e) 
{
    alert($(this).closest('tr').index());
});

HTML：

itm0 selected

当第二个img在滑块中激活时

.itm0 .selected{
    #thumbs::after{
         content:"first active image";
    }
}

.itm2 .selected{            
    #thumbs::after{
         content:"second active image";
    }
}

等

任何人都有一些解决方案？或者我怎么能在javascript中做到这一点？我是新手新手..给一些想法的朋友

Answer 1

这是一种奇怪的方式，但这是它的工作原理......

.thumbs { 
  width:100px;
  height:100px;
  float:left;
  margin:10px;
  background:green;
}

.thumbs:after {
  content: ' ';
  position:absolute;
  background:#000;
  color:#fff;
  border-radius:5px;margin:100px 0 0;
}

.thumbs:nth-child(1):hover:after {
   content:"first thumb";
}

.thumbs:nth-child(2):hover:after {
   content:"second thumb";
}

<div class="thumbs"></div>
<div class="thumbs"></div>

Answer 2

如果您愿意使用jQuery，则可以执行以下操作。

小提琴：https://jsfiddle.net/79fryyz1/

<强> HTML

我在#thumbs div下添加了一个额外的div。我给它上了一个名为$urlRouterProvider.otherwise("/home"); $stateProvider .state ('home', { url: '/home', templateUrl: 'views/common.html' }) .state ('home.home-1', { url: '/home-1', templateUrl: 'views/home.html' }) .state ('home.home-2', { url: '/home-2', templateUrl: 'views/home.html' })的课程。这将用于显示div下的文本。然后，我添加了一个名为<a data-ui-sref-active="active" data-ui-sref="home.home-1">Home 1</a> <a data-ui-sref-active="active" data-ui-sref="home.home-2">Home 2</a>的数据属性来存储要在每个图像之后显示的文本。我还添加了一个切换按钮用于演示目的。

caption

<强> JS

更改图像滑块并选择新图像后，您可以从数据属性中选取标题并将其显示在data-caption div下。

<div id="thumbs">
    <img class="itm0 selected" src="http://bit.ly/1S6znnc" data-caption="first active image"/>
    <img class="itm1" src="http://bit.ly/1MKyvBI" data-caption="second active image"/>
</div>
<div class="caption">first active image</div>
<a href="#" class="toggleBtn">Toggle</a>

我想在缩略图滑块div之后显示我的文字

2 个答案: